Managing depth in actinscript3 - actionscript-3

I have a 3D field with many MovieClips in it, and seems like the one last added is the one that overlaps others and not the one with highest z value.
Is there any property/function that sets z-index? (sorting children by z value seems too much like a hack).
A 3D engine that can place MovieClips will be helpful(but not one that requires custom drawing).
I'm using Flash CS5 with ActionScript 3

You're looking for parent.setChildIndex. You can use that or swapChildren to move the z-index of children around.

flash itself has no z-index sorting with the 3D space, so you have to either pull a completely new 3D engine or sort it manually every frame.
no matter what happens you will always get some problem when trying to overlap two planes on the same z co-ordinate, even in full 3D engines, you have to decide which one you want to be in front of the others or you will get flickering as each frame they change places.
personally i work with Away3D as an engine, and that has the possibilities for 'MovieMaterial' to a plane (which is probably what you are meaning) but it think this is a pretty general use and can be used in Papervision etc. too.

Related

Customize or create Starling animations, movements and Transitions

Since I don't know english very well, I'm not able to find clear examples and/or tutorials for what I'm trying to do.
So the (maybe stupid) question is:
How can I strongly customize tweens using Starling framework and make my Sprites(or MovieClips) following a line, curve or create every other non-linear movement that doesn't exist in Transition Class?
I have no problem with Basic Starling animation. So it should be a good start point.
Thanks in advance for examples, resources or suggestions.
PS. I already visit the "Starling Wiki" page about custom Transitions but, as a Beginner(almost Intermediate) coder I wasn't able to completely understand it.
I know there are many online resources about AS3/Starling/Flash/Nape/Box2D but it's not easy for a non-english Beginner programmer to understand them.
You can simple move Starling's movieClip by set .x .y .rotation
Since now, I haven't heard of scripted transition to make predefined non linear movement. As you said, you can move object from one position to another, but it won't happen in a curved line.
What I've done in the past is to predefine the path of the movement, as I needed exactly the same weird path. I did a path tween in Flash, then used one simple function to loop through all frames (using gotoAndStop()) and getting x and y property of the object, storing them in an array. This was done when initializing. Later on I could start animation on all my weird paths whenever I wanted, using onUpdate method of tween, and passing positions from the array I've populated in the beginning.
This of course is good if you have very weird paths. If you want very little curves, you could try to do a mathematical equation. Tween classes have an update function, which will be called on each frame. So on each frame you could do some calculations and modify the parameters. For example if you tween x and y properties, you could use the update function to add a random number to those values. Of course this will make very uncontrolled movement, I'm just giving an example.
The best solution I could think of, speaking of complexity/result ratio - to use Greensock's TweenMax (look at the second example) - it has a built in bezier tweening. This means it could move from point A to point B within a bezier curve. I think this will be a good solution for your problem :)

Rendering a Skybox without 3d libraries

So... I have some sets of 6 pictures, like these http://www.humus.name/index.php?page=Textures , and I basically want to render them on an html5 canvas like this: http://www.allforthecode.co.uk/aftc/forum/user/modules/forum/article.php?index=5&subindex=4&aid=303
But I'd rather not use any 3d library such as webgl or three.js, since that's the only 3d-related feature I need and I want the whole thing to be as lightweight as possible.
I thought, "c'mon, it's just a rotating cube, can't be that hard!"
WRONG.
My original planwas to keep the camera position fixed, ant then to keep track of the x and y offset (in radians) of each vertex, and then to project them on my canvas and to deform the context accordingly to render each face of the cube.
That approach doesn't seem to work, tho, so... can someone give me a pseudocode algorithm?
I think a good way to tackle this problem is to use CSS3 3d transformations. There's quite a few turorials to be found on the web giving details on how to build a 3d cube with CSS. Instead of using <div>s to build the cube's sides, you could use <img> or even <canvas> elements. By playing around with perspective attributes you should be able to place the 'camera' inside the cube looking out.

is there a way to bring stage3d to front?

i tried the hello example on the adobe site.
http://www.adobe.com/devnet/flashplayer/articles/hello-triangle.html
it works, but the context3D seems work on the stage's background in the lowest level. if i draw anything it will cover the 3d context.
i want to bring it to front or set it to a certain level. how can i do that?
also i was told if use 2d api and 3d api together , it will lower the performance of 3d,is it truth?In my works ,i still need 2d api ,for example, drawing the textfield .
Everything goes like this (from bottom to top):
StageVideo (1 or more instances) > Stage3D (1 or more instances) > Your regular display list.
And yes, regular display objects may degrade performance of Stage3D, therefore it may be better to use Stage3D alternatives of those. Some Stage3D accelerated frameworks already has some of those built in (like TextField in Starling).
No, you can't bring it to front.
2d and 3d not relates to each other. But of course, if you write 2d stuff that eat 100% of cpu, you'll get overal slow performance.
the only way is to get from the bottom layer of stage3D instance the rendered bitmap and display it on top of you displayList.. but it should work on each frame, thing that will affect the performance a lot and of course no mouse interaction... this solution will work only to display rendered scene on top of stage3D.. just a simulation

Representing a Monopoly board in flash?

I'm brand new to Flash (and game programming, really), but want to learn a bit of it. My overall learning project is to create a Monopoly clone in Flash. Unfortunately, I'm struggling to get over even my first hurdle - how to create the board graphically, and how then to deal with it in the code. So far, my thoughts are to break the board down into the different sizes of tiles (the normal property ones, the corner 4 and a large one for the middle section), then somehow place these all in the correct position relative to each other and keep that positioning correct as the pieces (and thus the camera view) move about the board. (And, hopefully some day have a zooming ability too...)
Is this a good approach, or is there a better one? Does anyone know where I can find a tutorial specifically on creating board games in Flash (any sort really, wouldn't have to be Monopoly but just a game that has a board which tokens move across - and preferably which has to pan as well).
Also, as an aside, is there any way to have a dynamically coloured rectangle in a flash MovieClip (like you can have dynamic textboxs)? I ask because it would be useful if there was, as I could generate every property tile with just one MovieClip which took a name, a value and a colour...
everything you describe here you can do pretty easily once you get the hang of component sprites. personally i would make a single sprite that will then hold all of the "tiles" in the game, this would allow you to "zoom" the board while keeping all the pieces relative:
if you create this parent to have an addTile() and getTile(index:int):Sprite method then you can easily push the tiles and retrieve them from an array, so that Go is at index 0, old kent road is at 1 etc. that way you can use a single integer value to determine the position of the player piece as you can then use getTile(int).x etc.
the position of the tiles themselves can be worked out relative to the others. if you have a tile that is 20px wide and 40px high then you can position the tile as x = index * 20 for the first row, after the initial 11, you need to rotate them all and then use the y index instead (rotation = 90; x = 11*20; y = (index-11)*20) this will depend exactly on your origin point of your Sprite.
to draw coloured boxes you use the graphics of the Sprite, there are plenty of tuts on API drawing out there, but here is a basic box of 10x10px:
var drawing:Sprite = new Sprite();
drawing.graphics.beginFill(0x0000FF);
drawing.graphics.drawRect(0, 0, 10, 10);
drawing.graphics.endFill();
Another approach to your question could be to learn about Object Oriented Programming. That may not solve your representing the board graphically straight away, but it would definitely help you structure your game.
With OOP, you could define a "Property" Class with a set of properties such as streetName , color , price etc... I haven't played Monopoly in a while but you can get the general idea, i.e. to create a base object and make it specific by setting the object's properties. Your question about the colored rectangle can actually apply to other properties, a great way to avoid unnecessary repetition.
Broadly speaking OOP tends to emulate real life situations, so you could actually look at your Monopoly game, break it into its various parts, find common properties etc... I won't start a lesson here :) I'd be pretty bad at it, but there's plenty of resources out there . Look for OOP, Design Patterns & Actionscript3.
After a little research, you may find that your question about how to handle graphics may not be such a problem after all.
Your questions are way too general. I'm sure you don't want us to walk you through your whole project right?
Now to gain some experience, I suggest to you simply work through a few flash gaming tutorials. There are a LOT of those, I googled for 2-3 seconds and found this:
http://pelfusion.com/tutorials/35-flash-game-development-tutorials-fla-files/
I'm sure you feel disappointed by this answer, but this is the first step in solving your own problems. The internet has more than enough general game tutorials already. If you have specific problems, we might be of better help to you.
I assume with dynamically colored rectangles, you mean simply changing the color during runtime. Well you simply give the rectangle a name, and change the color property of it in code. Like this: rectangle.Color = Something.
You might want to start out with a simpler project just to learn some of the basics, maybe a little game where the player has to move a rectangle from one side of the screen to the other using the arrow keys or mouse, upon which a score is incremented or something. This will help teach you how the coordinate system works, among other things.
To draw stuff using code, you can create a new Sprite or MovieClip object and use its graphics property to draw primitive shapes (rectangles, etc.) to it at runtime.

Howto dynamically render space background in actionscript3?

I'm creating a space game in actionscript/flex 3 (flash). The world is infinitely big, because there are no maps. For this to work I need to dynamically (programatically) render the background, which has to look like open space.
To make the world feel real and to make certain places look different than others, I must be able to add filters such as colour differences and maybe even a misty kind of transformation - these would then be randomly added and changed.
The player is able to "scroll" the "map" by flying to the sides of the screen, so that a certain part of the world is only visible at once but the player is able to go anywhere. The scrolling works by moving all objects except for the player in the opposite direction, making it look like it was the player that moved into that direction. The background also needs to be moved, but has to be different on the new discovered terrain (dynamically created).
Now my question is how I would do something like this, what kind of things do I need to use and how do I implement them? Performance also needs to be taken into account, as many more objects will be in the game.
You should only have views for objects that are within the visible area. You might want to use a quad tree for that.
The background should maybe be composed of a set of tiles, that you can repeat more or less randomly (do you really need a background, actually? wouldn't having some particles be enough?). Use the same technique here you use for the objects.
So in the end, you wind up having a model for objects and tiles or particles (that you would generate in the beginning). This way, you will only add a few floats (you can achieve additional performance, if you do not calculate positions of objects, that are FAR away. The quad tree should help you with that, but I think this shouldn't be necessary) If an object having a view leaves the stage, free the view, and use the quad tree to check, if new objects appear.
If you use a lot of objects/particles, consider using an object pool. If objects only move, and are not rotated/scaled, consider using DisplayObject::cacheAsBitmap.