[Disc] Strille's Tile Based Tutorial (Part 1 - Scrolling)

[strille]

Hello everyone. I've just finished part 1 of the tutorial I've promised to do. Man, it's hard to write tutorials! Hope you find it useful. Part 1 is a very basic scrolling engine, but when you understand the technique (and it's not that hard) you can easily modify and extend it. Special thanks to Squize for reading it and giving me some useful feedback.

Link: http://www.strille.net/tutorials/

If you have any questions, suggestions, corrections etc, post them here.

[marmotte]

^_^
thanks a lot, mate...

[Squize]

You've kinda heard from me already, but really fantastic work mate.
(Although I really didn't think Super-tiles would give you such a speed increase over gotoAndStop. Live and learn )

Squize.

PS. Thanks a lot for the mention, really no need though

[mbenney]

Thats cooler than school mate - never thought of doing it like that, cant wait for the one on collision
thanks again
[m]

[jonmack]

Dude... what can I say. Thankyou!

If flash was an official religion, you would be its god.

Did you write your own AS parser too? To format the text? Or use the one from flashkit? Looks amazing anyway.

Tomsamson!! Add this to the knowledge database sticky!

[kdsh7]

Very nice. If knowledge were love everyone would look like you (and Squize).

Cheers!

[xMCNUGGETx]

Looks great strile I know I couldnt wait till you released these!

I need a little more time to work through it in flash, but I have given the article a good read. Awesome work!

Nugget

[fduffner]

been waiting a long a time for this

[tonypa]

I read it and I fail to understand why it would be faster. Im sorry, but you are creating more tiles on screen then with gotoAndStop method, plus you loop through all of the objects at each frame. Yet, your engine is fast. Why? Because you use 120 fps? Because you dont have too many tiles on screen (I mean the tiles dont cover all the visible area normally)? Im not convinced by the argument how fast for..in loop is, since gotoAndStop method doesnt use any nested loops either and it doesnt loop the tiles in every frame, only when they are moved around.

Im sure there is perfectly good explanation and I hope you could find time to explain it

[strille]

Did you write your own AS parser too? To format the text? Or use the one from flashkit? Looks amazing anyway.

I use this ActionScript Highlighting Service, but I change the red color to blue, and add a grey background.

tonypa, It's not necessarily faster than say gotoAndStop, but I do think it has many advantages (like moving platforms). And for certain scenarios I do think it's a lot faster. Many games do not have tiles covering the whole screen (super mario for example) and for games like that this method is probably faster. Scrolling large amounts of the screen in one go, say 1/3 of the screen width also seems to work better with this method than gotoAndStop, at least in my experience. If you were to make a top view rpg game then a gotoAndStop would probably be better, because that would require you to have the entire screen covered in tiles, and those games don't scroll much per frame.

This technique has another advantage, and that is that tiles which are part of the same structure in the game (say a bridge) can be grouped together by placing them in the same "super tile". You get a sense of "objects" in a much clearer way. I don't really know an easy way to achieve the "bending bridge" or the "swing" seen in the Flash MX Platform Engine Demo by using gotoAndStop.

I do create more tiles than if I were to use a gotoAndStop method, which just moves tiles around to "create" new ones. But I don't think that's a big concern. The creation of tiles is not the bottleneck, but rather moving a movie clip containing a large amount of individual movie clips is.

I just use 120 to be able to see if changes in the code makes a difference in fps, a real game would not need 120 fps.

I've made some small changes in the code, I no longer remove old movie clips on a frame where the area changes, this to reduce the maximum number of calculations on a single frame. I've also added an option to hide the green bounding boxes.

[lapo73]

Thanks Strille for sharing that great tutorial, there's a lot of very interesting stuff going on there!

There's still one optimization you could do: try substituting your Math.floor() and Math.max() calls with something like m_floor() and m_max()

where m_floor = Math.floor() and m_max = Math.max

This will save extra time because it won't look up in the Math object for the function name at every cycle

Here you can find another interesting solution to the bitmap shifting problem.

[Ihoss]

i tried that test thing and it is incredibly fast. 64 fps! i think ill do a tile based game now...

[Ihoss]

THANK YOU LAPO!!!

i really needed that. and it works even if the mc is in a decimal position

[tomsamson]

i´ll have a look at it at home,jut wanted to drop in and say:
bigtime kudos to strille for his great work and also for sharing it with the community!,just added it to the knowledgebase thread

[lukesquall]

Thanks man it's great!

Well done .

~yarr

[strille]

lapo, I didn't bother optimizing the Math functions by using a reference to the functions directly since they are only used in the pre-calculation and not on every frame. Maybe I will add it later.

Thanks for posting another solution to the shifting bitmap bug. Didn't know about that one. If I were to use that solution, it makes the creation of super tiles a bit more confusing, but it's probably worth it since you can remove the width -= 0.05 and _height -= 0.05 in the loop which creates the tiles.

[Squize]

I was meaning to ask about the bitmap shift bug workaround ( I'm assumuing it's cause the screen isn't filled with tiles like a gotoAndStop engine, so the distortion is more visible ).

"(and Squize)."

Kev, I offered up some ideas for about 5 lines with the tut and that was my input mate. Next to nothing.
( But I got to read it first, hurray ! )

"where m_floor = Math.floor()"

I used to use the Mf=math.floor trick, but pred highlighted recently that int is a lot quicker.

Squize.

[Kirill M.]

int is also more convenient, because it chops to 0, which is what I need most of the time.

[lapo73]

Originally posted by Squize
"where m_floor = Math.floor()"

I used to use the Mf=math.floor trick, but pred highlighted recently that int is a lot quicker.

Indeed, you're right!
I am right now preparing an article on AS optimizations for the flash player 6 and I'll add this one too. (soon to come on the gotoandplay.it site)

I'll post it when it's ready

[lapo73]

Originally posted by strille
[B]lapo, I didn't bother optimizing the Math functions by using a reference to the functions directly since they are only used in the pre-calculation and not on every frame. Maybe I will add it later.

yes, forget it! It's me that I read the code too fast