Background x Foreground tricks

A place for tutorials on how to get the most out of Flash

Background x Foreground tricks

Postby Ivan-Aedler » Sun Mar 17, 2013 12:31 am

Hail all,

I'm trying to understand how people make objects whose character can pass over it AND under/before it.
Like in this example (reference: Super Mario RPG):

background foreground.jpg
background foreground.jpg (39.86 KiB) Viewed 2451 times


Some say we can make actually TWO identical objects, one in the foreground, one in the background of the character.
LAYERS:

-Foreground
-PLAYER
-Background

When the player Z position in the isometric or '2.5d perspective platformer' game is a given difference value from that object, background object gets invisible and the foreground one appears. If not, the contrary occurs.
Is there other better methods for that?

Thank you!
User avatar
Ivan-Aedler
 
Joined: Fri Jun 03, 2011 6:34 am
Location: GMT -3

Re: Background x Foreground tricks

Postby OwnerOfSuccuby » Sun Mar 17, 2013 12:25 pm

Sorry for a long answer :roll: i was sleeping :lol:

It can be made in different ways - but it depends what algoritms do you use and where is based your Player object.

If it is on the same level then it is more simple solution.

Just let us think about possible situation:

It is possible to make visible / invisible part of object - and for example it is possible to make it on like hit objects work - and even do not put x there.

It is posible to attach player to another layer.

It is possible to use swap depth and change layers of where the parts are and make Player Under or before object.
download/file.php?id=12858

It is hard to say by picture how it work in this game - it only is possible to say if test it or have some video.

What is the best solution how to make is not an easy decision too. I do not see for exampe why you idea is bad and as you can see by picture it will work in thins situation like on your picter - becouse objects that interfearence Mario do not interfearence each other, but if they will then i think swap depth or may be attach constructions - it is no one solution for all i think.

But it is better to make it as simple as possible - it lets you to work with it in future more easy then.

So if i would make some kind of that i would make it on Mario hitTest some recktangle - and make part of object visible (when mario is under the construction and invisible in other situations).

Or swap depth on changing charecters X coordinate. (But in this solution you will need more test for it - more complicated solutions takes more time). But for the task like on screen may be this way is unnecessary at all ;)
OwnerOfSuccuby
 
Joined: Fri Jun 11, 2010 9:33 pm

Re: Background x Foreground tricks

Postby GoRepeat » Sun Mar 17, 2013 1:29 pm

You should sent a PM or go to HNRLY's blog. He did a good job of doing what you are asking since Sex Realm used that perspective. If I remember correctly, he had a function that dynamically mapped out the hitbox for an object on stage so the character would walk "around" things correctly.

Alternately, as you suggest, you can just cheat and make two objects on top of each other with the character's layer in between then map out seperate hitboxes for them. Although the game will have to full load both and depending on how complex you get lag could start to become an issue.
Picarto LiveStream: https://picarto.tv/GoRepeat
Other Stuff: Click Here
User avatar
GoRepeat
Moderator
 
Joined: Wed Jul 21, 2010 2:26 am
Location: Behind the Looking Glass

Re: Background x Foreground tricks

Postby OwnerOfSuccuby » Sun Mar 17, 2013 1:46 pm

I do not think that it will be any lags becouse of it - there are not moving objects just a few "pictures that becomes visible or invisible some times"

For example you can make it like MovieClip with 2 frames where first is empty - empty MovieClip frame will not take more CPU i think. I do not test how visiability use CPU so i can not say about this but for empty movie clip - why not ?

By the way wgat is HNRLY blog ? Is there some kind of link on it - i am already interesting how did he do it :mrgreen:
OwnerOfSuccuby
 
Joined: Fri Jun 11, 2010 9:33 pm

Re: Background x Foreground tricks

Postby Ivan-Aedler » Sun Mar 17, 2013 2:13 pm

OwnerOfSuccuby Wrote:Sorry for a long answer :roll: i was sleeping :lol:

Hey , so you sleep when I talk and you talk when I sleep? :lol: Dont worry ;)

OwnerOfSuccuby Wrote:If it is on the same level then it is more simple solution. Just let us think about possible situation: It is possible to make visible / invisible part of object - and for example it is possible to make it on like hit objects work - and even do not put x there.

X? Where? You say, detect if the character touches the right area boundaries? (half-right band of the object, in this case, two square lines?)

OwnerOfSuccuby Wrote:It is posible to attach player to another layer. It is possible to use swap depth and change layers of where the parts are and make Player Under or before object.

Yes, but its a problem when you have more than 1 object, like several objects. Let's say a given bedroom has 10 objects the character can hide/walk before it. I can put them all inside a special MovieClip (MC), say, ForeGroundSpecial, in a layer named 'foreground', and all other objects, inside another MC, say, Background, in a more deep layer named 'background'. Then I can issue swapdepths to change MC layering, as I'm not able to use swapdepths to exchange LAYERs themselves.
But this can bring problems if all consecutive objects are in 'ForeGroundSpecial, because when the character is over a given object (the stove/faucet object in the picture above), then it touches the wardrobe object in order to be hidden by it, all furnitures will be in the foreground. So it will work only for non consecutive objects (we will need to put only the left and right taller wardrobe boxes inside foreGroundSpecial). So Mario will be going before them, instead of other objects.

Swapdepths works only with movieclips:
Adobe: Swapdepths swaps the stacking, or depth level (z-order), of this movie clip with the movie clip that is specified by the target parameter or with the movie clip that currently occupies the depth level that is specified in the target parameter. Both movie clips must have the same parent movie clip. Swapping the depth level of movie clips has the effect of moving one movie clip in front of or behind the other.


My other approach (duplicating objects) is interesting in a way you only need to use the objects themselves (movieclip objects). Then you put each one object (say, a wardrobe) twice: one in the foreground LAYER and other in the background LAYER (you dont need to put it inside a special MC). Then you can play with 'visible=true or false', depending where the character is.

OwnerOfSuccuby Wrote:So if i would make some kind of that i would make it on Mario hitTest some recktangle - and make part of object visible (when mario is under the construction and invisible in other situations).

But we're not able to hide only part of a MC, inside Flash. If we create a mask for that (then activate the mask), the object will need to be converted to MC, and using masking uses more resources than using a duplicated object.

Gorepete Wrote:You should sent a PM or go to HNRLY's blog. He did a good job of doing what you are asking since Sex Realm used that perspective. If I remember correctly, he had a function that dynamically mapped out the hitbox for an object on stage so the character would walk "around" things correctly.

Thanks, I'll check it ;) I'm almost up to create a trigonometric function for that, but for sure all approaches will force us to make the object a movie clip, in order to play with visible=true/false, or swapdepths, as we arent able to hide only part of the object dinamically aside of using masking.

Gorepete Wrote:Alternately, as you suggest, you can just cheat and make two objects on top of each other with the character's layer in between then map out seperate hitboxes for them. Although the game will have to full load both and depending on how complex you get lag could start to become an issue.

Yes, it should lag if we have , say, 100 objects, but as RPG games just use a few objects just to give depth, there is no problem ;)

You both can check the 'duplicating' effect on MIM PUT, in the worldmap, near Peach Castle. See the bunker? That beehive-like structure? Peach can go in front/before it using the technique ;).
User avatar
Ivan-Aedler
 
Joined: Fri Jun 03, 2011 6:34 am
Location: GMT -3

Re: Background x Foreground tricks

Postby Ivan-Aedler » Sun Mar 17, 2013 3:01 pm

OwnerOfSuccuby Wrote:For example you can make it like MovieClip with 2 frames where first is empty - empty MovieClip frame will not take more CPU i think. I do not test how visiability use CPU so i can not say about this but for empty movie clip - why not ?

Better! Like I've said above, you can use visible property (on or off). So you just need one frame.
But you will need to use functions OUTSIDE this MC, because they're equal, so you need to indicate which one if foreground (putting an instance name, say, WardrobeFG) and other, WardrobeBG. If you have more objects, you will be putting ObjectBG and ObjectFG...... StoveBG and Stove FG...Then make a function that changes visibility of them if Peach Y is a bit less than object Y (remember Y is counted from '-' to '+', against carthesian coordinate system).
User avatar
Ivan-Aedler
 
Joined: Fri Jun 03, 2011 6:34 am
Location: GMT -3

Re: Background x Foreground tricks

Postby OwnerOfSuccuby » Sun Mar 17, 2013 3:15 pm

Sorry i wil return soon - need to go outside for a time - but let us see how do you want it to work.

And the most important that i need is to understand where it your Player object ?

Is it in the Big map with all objects or it is on layer that is before all this ? (I mean is it in another movie clip - and is all other objects in it too ... i mean is player and all other object in different containers ... - i hope you understand me - i little do not know how to better transate it :roll: )

Or you have 3 layers before under and player layer ?

In all this situation it is different ways how to make - and some will not work for example.
OwnerOfSuccuby
 
Joined: Fri Jun 11, 2010 9:33 pm

Re: Background x Foreground tricks

Postby Ivan-Aedler » Sun Mar 17, 2013 4:01 pm

OwnerOfSuccuby Wrote:Sorry i wil return soon - need to go outside for a time - but let us see how do you want it to work. And the most important that i need is to understand where it your Player object ?

Below, its the layer ordering:
(ROOT STRUCT)
ROOT
..- HUD (MC)
..- Foreground (tons of MCs or sprites inside)
..- Player (MC)
..- Respawn Layer (MC)
..- Enemies (tons of MCs or sprites inside)
..- Background (tons of MCs or sprites inside)
..- Camera (MC)
..- Boundary (MC)

I dont use 'level' MC. I should have used it, so it becomes:
(LEVEL STRUCT)
ROOT
..- LEVEL (MC)
....- HUD (MC)
....- Foreground (tons of MCs or sprites inside)

But it will increase complexity. I think that ROOT STRUCT above works well.
So, using the ROOT STRUCT mode, I refer to the player using "_root.player", and any object, like wardrobe, as "_root.wardrobe", so I can play with X and Y without using, say, globalToLocal.
User avatar
Ivan-Aedler
 
Joined: Fri Jun 03, 2011 6:34 am
Location: GMT -3

Re: Background x Foreground tricks

Postby OwnerOfSuccuby » Sun Mar 17, 2013 5:52 pm

When you move the map how do you make it ? You move each object or only container ?

For example can you some how make one object before another like right click -> make in front ... .

Yahhh ... i do not know how to say it i batter make an example :
Last edited by OwnerOfSuccuby on Sun Mar 17, 2013 6:15 pm, edited 2 times in total.
OwnerOfSuccuby
 
Joined: Fri Jun 11, 2010 9:33 pm

Re: Background x Foreground tricks

Postby Ivan-Aedler » Sun Mar 17, 2013 6:02 pm

OwnerOfSuccuby Wrote:When you move the map how do you make it ? You move each object or only container ?

Each object. Like your example below! Perfect ;)
Now we add collisions to avoid her to go through the object and its perfect ;) The collision should be in its own MC (like ground_collision MC).
But as I've said, in a large game (with foreground , background, and more objects, say, 1000 of them), we should have a foregroundMC and backgroundMC in order to swap them properly.
Or at least foregroundMC, in order to move the object there, then move it back to its starting place. So in this case alone, we dont need to create backgroundMC.

OwnerOfSuccuby Wrote:For example can you some how make one object before another like right click -> make in front ... .

Or we can use CTRL+UP or CTRL+DOWN to do that ;)
User avatar
Ivan-Aedler
 
Joined: Fri Jun 03, 2011 6:34 am
Location: GMT -3

Re: Background x Foreground tricks

Postby OwnerOfSuccuby » Sun Mar 17, 2013 6:21 pm

There are 3 samples in zip file - i will only try to show idea.

The object is like wall you can not walk through it by algoritms of your game.

If they are in one layer with root - you can try to use swap depth method (1st example) - it is good if you do not want to create copy of object.

The 2-3 examples are working in any situation. But for it you need to create background with object and one object before that background.

Swap depth if it will work in your situation can be used if object interfire each other, other methods i do not know - do not test it - but Swap Depth needs more attention to work like you want.

Bad code in example sorry - do not optimize it just to show idea.

Do not make example to attach / unattach - becouse i think that will not be a good solution in this sutautions.

--- --- --- --- --- --- ---

If swap depth do not work in your setuation and you want to work with collisions it is possible to make for example some kind of web:

Make one big object that looks like object on the vback ground and devide it ti sectors. Make all parts like in example 2 and give it names part1 part 2 and etc.

When player is in it - you can make part of that object visible / invisible - or change its depth for example. I think this method will work for any situation i just can imagen. (But all object will need time to code it - make sectors / rage where to show one or another part and its logick how it works).
OwnerOfSuccuby
 
Joined: Fri Jun 11, 2010 9:33 pm

Re: Background x Foreground tricks

Postby Ivan-Aedler » Sun Mar 17, 2013 7:23 pm

OwnerOfSuccuby Wrote:There are 3 samples in zip file - i will only try to show idea.

Thank you, I'll check them and I'll give my feedback/opinions here ;)
The web method is interesting but its a lot of work and it makes the objects complex :/
I cant make Peach go up/down in normal maps, only in the worldmap. In that area, I use ground in X and Y axis. She can go only when there is ground.
For the trick to work, I need to create 'bottom lines', that is, thin rectangles with the name 'collision' (or any name you want), so I check if Peach feet touched it. If so, avoids Peach to keep going up/down/left/right, because its a collision area.
User avatar
Ivan-Aedler
 
Joined: Fri Jun 03, 2011 6:34 am
Location: GMT -3

Re: Background x Foreground tricks

Postby OwnerOfSuccuby » Sun Mar 17, 2013 8:17 pm

If it is for MiM game may be if you want to use it on map - i do not see short distance betwen objects there - so may be it even can be possible to make it with out code - by seporating object on 2 one ow it is before and another after player ?

Or i do not understand you right agoain :mrgreen: May be it will work like it:

One part of tree that is upper then the line is before player and another after him ?

Or in what situation do you want to use it ? I first thinck that you try to make some kind of 2.5d - for example like for game Parasite Eve and etc. (3d with out camera rotation - that is not really 3d just looks like)
OwnerOfSuccuby
 
Joined: Fri Jun 11, 2010 9:33 pm

Re: Background x Foreground tricks

Postby Ivan-Aedler » Sun Mar 17, 2013 9:50 pm

OwnerOfSuccuby Wrote:If it is for MiM game may be if you want to use it on map

Yes, for the map.

OwnerOfSuccuby Wrote:i do not see short distance betwen objects there - so may be it even can be possible to make it with out code - by seporating object on 2 one ow it is before and another after player ?

The bunker area is a large object that touches two walk areas, see it!
(please click once inside each image to enlarge it!)

two ways to go.jpg
two ways to go.jpg (48.55 KiB) Viewed 2373 times


I can use 'bottom collision', an object inside the object I want to use swapDepths. But for simple objects , just registration points work. See this.
PIC 1: your registration points are not in the bottom. You can create this rectangular MC inside the object and call it 'collision', so you have more control and can use HitTest (hitTestObject in AS3).
PIC 2 and 3: if you use registration points in the BOTTOM part, you can just compare Y of the character with Y of the object. (if _root.char._y < _root.mushroomHouse)...

Spoiler (click to show/hide):

bottomcollision0.jpg
bottomcollision0.jpg (48.73 KiB) Viewed 2373 times
bottomcollision1.jpg
bottomcollision1.jpg (49.95 KiB) Viewed 2373 times
bottomcollision2.jpg
bottomcollision2.jpg (40.76 KiB) Viewed 2373 times
Last edited by Ivan-Aedler on Tue Mar 19, 2013 7:35 am, edited 1 time in total.
User avatar
Ivan-Aedler
 
Joined: Fri Jun 03, 2011 6:34 am
Location: GMT -3

Re: Background x Foreground tricks

Postby OwnerOfSuccuby » Sun Mar 17, 2013 10:50 pm

By the way - i did not test Swap Depth on CPU usage - so it is better to make it on change of variables or some thing like that. Not like in my example - it was fast to show create.

By the way do registration points work faster ? If you will move it you have to remake them ? Or they work automatickally ? May be make 2 invisible rechtangles for example and calculate positions by them - then you can use this mashroom again with out change code. By the way i do not think that hit test object will eat more cpu in this situation too.

By the way - i read that your game require computer with 2 core - how do you seporate it on the 2 cores ? Or flash make it by itself in new version ?
OwnerOfSuccuby
 
Joined: Fri Jun 11, 2010 9:33 pm

Re: Background x Foreground tricks

Postby Ivan-Aedler » Tue Mar 19, 2013 12:15 am

Oh, only to clarify.
The pic with the GREEN rectangle (bottom collision) MUST be in the ground object and this must check the character REGISTRATION POINT (or any fixed point/another rectangle around her feet). Its a necessity because the character NEEDS to be blocked by this green rectangle, to avoid her to walk like a ghost inside the object.

OwnerOfSuccuby Wrote:By the way - i did not test Swap Depth on CPU usage - so it is better to make it on change of variables or some thing like that. Not like in my example - it was fast to show create.

I didnt understand. You say its better not to use SwapDepth in this case?

OwnerOfSuccuby Wrote:By the way do registration points work faster ? If you will move it you have to remake them ? Or they work automatickally ? May be make 2 invisible rechtangles for example and calculate positions by them - then you can use this mashroom again with out change code. By the way i do not think that hit test object will eat more cpu in this situation too.

Yes it works faster because those points go with the object. So if you move the object, the registration point move with them. The X,Y of the object is, actually, the registration point itself (its not like mathematics, where X and Y is variables). _X and _Y is a registered number of this registration point (I know you already know this) ;)
You dont need to make 2 invisible rectangles, one inside each object. Only if you need precision (like your registration point being in another area, like in a random place). Instead of trying to use _root.char._y-_root.char._height * 2, or something like that to try to set the point we want (due to wrong placed registration point X and Y), we have two choices:
- set the registration point where we want and create trigonometric functions (actually, just a if Y is higher than Y2).
- create an inner rectangle, like you said, and use hitTest (hitTestObject).

OwnerOfSuccuby Wrote:By the way - i read that your game require computer with 2 core - how do you seporate it on the 2 cores ? Or flash make it by itself in new version ?

Well, Flash is single core, BUT our windows/linux/MAC systems use CPU for themselves (between 5 and 15%), so its better to have 2 cores because 1 will be for the system, the other, for the game.
User avatar
Ivan-Aedler
 
Joined: Fri Jun 03, 2011 6:34 am
Location: GMT -3

Re: Background x Foreground tricks

Postby OwnerOfSuccuby » Tue Mar 19, 2013 12:07 pm

In my example i make swap depth each time object is on the recktangle - it means 24 times per second. (24 fps).

May be It is better to make variable and if it change depth make it for example true - and if it is not true do not swap again.
And the same for false value of this variable.
I think that swap depth eat more recources then: if (a==false){then swap depth; a=true;}
But i do not test it - do not use swap depth in a lot of objects in this way.

If it does not lug when we use it like in my example i think it will not lug - because it is not optimized now and even though we have not get visible lug with it.

So in your situation you calculate this point like:
_root.char._y-_root.char._height * 2, or something like that
?

I understand ;) But i do not know why but after some my update of project i made a lot time ag i was so bored to calculate so decided to make invisible rechtangles and use its x/y coordinates :lol:

Oh i understand it now thank you.

I just think - As i understand a lot modern android smartfons use 2 not very poverful cores - for example i have - 2 cores with 1 mhz. And if for example it can use more then one core it can maybe give better perfomance for flash on it. But it is just for fun so it does not metter ;)
OwnerOfSuccuby
 
Joined: Fri Jun 11, 2010 9:33 pm

Re: Background x Foreground tricks

Postby Ivan-Aedler » Fri Mar 22, 2013 12:50 am

Sorry about the delay!

OwnerOfSuccuby Wrote:In my example i make swap depth each time object is on the recktangle - it means 24 times per second. (24 fps). May be It is better to make variable and if it change depth make it for example true - and if it is not true do not swap again. And the same for false value of this variable. I think that swap depth eat more recources then: if (a==false){then swap depth; a=true;}
But i do not test it - do not use swap depth in a lot of objects in this way.

Yes you can do that. Or make swapdepth work only if the character touches the ground collision (the rectangle MC). You can add as many hitTestObject as you want, its low CPU intensive. Its almost like checking a condition with 'IF'.

OwnerOfSuccuby Wrote:So in your situation you calculate this point like:
_root.char._y-_root.char._height * 2, or something like that
?

On some objects, yes, because I use the registration point for other purposes, like placing objects in the ceiling, so for these I use this registration point configuration:

regp.jpg
regp.jpg (4.49 KiB) Viewed 2290 times

So I have to recalculate new point areas to check collision in a given point in the bottom. But invisible rectangles can also be used. HitTestObject is almost unnoticeable to CPU as I've said before.

OwnerOfSuccuby Wrote:I just think - As i understand a lot modern android smartfons use 2 not very poverful cores - for example i have - 2 cores with 1 mhz. And if for example it can use more then one core it can maybe give better perfomance for flash on it. But it is just for fun so it does not metter ;)

Two cores, even being , say, 1ghz or less, is better than single core with 2ghz because the operating system will use the CPUS better. Flash is faster in a 2 core systems.
User avatar
Ivan-Aedler
 
Joined: Fri Jun 03, 2011 6:34 am
Location: GMT -3


Return to Tutorials



Who is online

Users browsing this forum: No registered users