Flash 9/AS3 scrolling engine, preview version

Here is a first version : http://gamesquid.com/TileSQUID/TileSQUID.zip

It has one type of layer implemented (TileLayer), and two types of tiles (Tile and SuperTile). Check the Game.as file to see how to work with it. This has an array with the map, but I plan to add support for at least one map editor (Tiled), which uses an xml format, so you'll be able to import your maps from external files. But that might take a while.

Keep in mind that it's the first thing I ever did in AS3 (not even a hello world before it), so there is definately room for improvement. There's also almost no comments in it, which I know is bad, but you'll have to live with that for now.

It doesn't compile when you set actionscript 3 to strict, I'm not sure if I should try to fix that or not.

And I know the example implementation sucks, just a few boxes.

Any comments?

Ow yeah, about the cache option on layers, this will use cacheAsBitmap on the layer. This is not very efficient when the layer is update a lot, so you should probably only use it when you have large tiles (so they don't have to be replaced as much) - or supertiles.

So when you want a map composed out of a lot of small tiles (for instance, I'll be using 24x24 tiles in one game), you're best of to group them in larger supertiles of about, say 128x128 pixels or more, depending on the scrolling speed, and use the cache feature. This should make sure that it won't have to update as much tiles when scrolling, and the scrolling itself should be faster because of the cacheAsBitmap.

I'll probably add a loadMapFromGrid function which uses a 2 dimensional array as input, and with an option to automatically create supertiles out of it, with a size you can specify.
But first I'd like to know what you all think.

It looks nice, from the looks it's extremely similar to Squize's scrolling implementation (keeping all the tiles in one array, and then using a smaller boolean array to flag visible objects), props for being what looks like the first to port it to AS3!

This is some what off topic..

Now that every one will be getting into the swing of using AS3 do you think this will bring the market value up... To me it almost seems that its going to be alot harder for (Sorry to say) no-hopers game developers to make crud games with crud code.

Learning any programming languge takes some amount of dedication, AS3 will take alot more of it to learn, im was just wondering if this might up the quilty of flash gamming...

i was also thinking that, but basically if there's crud games now, there always will be, no one is enforcing people to use AS3, some might not even care, i think its going to be something that a serious game developer will tackle and not the others who just want to get something on new grounds.

So yeah, quality will go up in areas where it due. Gaming portals will probably stay the same, except for the od programmer that has decided to laern the language

Cant see how AS3 itself improves Flash games. Just because it follows ECMAScript standard or is OOP doesnt make games any better. I actually see leap from AS1 to AS2 bigger then AS2-AS3. Pretty much everything you can do with AS3 can also be done in AS2. I also have not yet seen any significant speed increase in AVM2, the perfomance in drawing the graphics is same as before and while the code executions may be faster there are very few games running so much code that it slows down the game.

The main problem with making AS3 complex and "mature" as every other programming language is that when someone is able to write AS3 code he can write same code in any other programming language too. And if he can program in other language why would he choose to use Flash? The AS1 was much easier then other programming languages allowing people with no previous programming experience to write games. AS3 is not something you pick up in days and when you need to decide to spend next couple of years learning AS3 or some other programming language there isnt many good reasons to go with AS3.

Quote:

---

It looks nice, from the looks it's extremely similar to Squize's scrolling implementation (keeping all the tiles in one array, and then using a smaller boolean array to flag visible objects),

---

Never seen how Squize handles scrolling, but I am aware that my engine is similar to Strille's approach (I even credited him in the source for one important function). To my defense, my AS2 engine was something I came up with entirely on my own, and it was also pretty similar. Turned out it ran just a bit slower than Strille's engine, so I decided to look at his tutorial and learn a few tricks - which is what it's there for, right? :)

Thanks for the props!

Quote:

---

Cant see how AS3 itself improves Flash games. Just because it follows ECMAScript standard or is OOP doesnt make games any better.

---

Well, you need to be a slightly better programmer to work with as3 - but a better programmer doesn't necessarily mean a better game.
However, in AS3 it's easier to organize your code properly, which will benefit all of us.

Quote:

---

I actually see leap from AS1 to AS2 bigger then AS2-AS3. Pretty much everything you can do with AS3 can also be done in AS2.

---

There is one significant addition - being able to re-parent movieclips. It's like my prayers have been answered. If you don't see the big deal, I can give you an example where it's very useful and even necessary.

Quote:

---

I also have not yet seen any significant speed increase in AVM2, the perfomance in drawing the graphics is same as before and while the code executions may be faster there are very few games running so much code that it slows down the game.

---

Path finding and complex ai, amongst other things, will benefit greatly from faster code execution. I haven't done any comparisions, but sprites are supposed to be faster than movieclips, even if it's just a little, it can make a world of difference.

Quote:

---

The main problem with making AS3 complex and "mature" as every other programming language is that when someone is able to write AS3 code he can write same code in any other programming language too. And if he can program in other language why would he choose to use Flash?

---

A) Because you can play your games on the web without extra plugins (flash penetration is higher than java if I'm not mistaking).
B) Your game will be cross platform
C) You don't have to worry about a graphics engine, it's already there
D) Are you telling me the only reason you're making games in flash is because it's simple?

Quote:

---

and when you need to decide to spend next couple of years learning AS3 or some other programming language there isnt many good reasons to go with AS3

---

Come on now, it's not that difficult to learn as3. This scrolling engine is my first project in AS3, I just looked at a few examples, looked up a few things, and I was ready to start coding. Took me a few hours to get this engine up and running. And granted, I don't know everything there is to know about AS3, not at all, but it's more than enough to get started.

Whether you like it or not, OO is just better and defintately a lot cleaner than AS code intertwined with your frames (which I only ever use for a simple gotoAndPlay to loop an animation or similar things). In AS2 it was best practice to use OO, now it's a necessity. It's a natural evolution to me.

Plus, you can always just stick to AS2 or even AS1. AS3 is there for when you need more power etc.



Anyone else want to comment on my scrolling engine?

I like the name :) . Looks good, I'll give it a play when I get home.

Didn't know you could reparent movieclips, that is an amazing feature.

Quote:

---

Originally Posted by Pugger

Didn't know you could reparent movieclips, that is an amazing feature.

---

This is amazing, but it has a downside too - when you remove a movieclip from it's parent, it still exists, it's just not parented (displayed) anymore. So you'll have to rely on the garbage collection to remove it. So make sure you always delete or null your references, and also references to any children (or "unparent" the children). Plus it's only removed when the GC does a sweep, so all events on it will still be triggered, so you'll have to remove those too.

But for me personally, the new movieclip-model is great. In one game, I wanted each enemy, character, etc to be in an external swf and only load what I needed in a level. Unfortunately, you couldn't duplicate a loaded mc, until now. So what I did was load an external swf with a movieclip of the enemy (or whatever) inside, and duplicate that enemy within the loaded swf - which had one downside : I couldn't change the depth of enemies individually, only within their parenting movieclip (so all enemies of type A could have their depths set relative to eachother, but all enemies of type B were always in a seperate "layer", which sucks for top-down games). So I had to group all types of enemies and other sprites in swf's per level. Now I have a lot more flexibility. If that makes any sense.

yes, that re-parent feature would be good, my tile engine i made in AS2 which was going to be based on areas needed this feature to be able to operate. Now i can have only 9 areas and detect when an object has moved into an area, remove that object from its current area into the next one, within each area there are multiple depth levels (layers)

It makes sense in my head anyway ;)

Maby its a me thing but,.. why is it just a green screen? I only looked at the swf... and yes im running fp9...

Did you unzip it? It needs an swf from the data directory. I did it this way to show how you can load tiles from an external tileset-movieclip (which just needs the tiles in the library).

kk it worked now...
Thats a preaty good effort for a first project in AS3... good stuff

Ok, fixed some small but important bugs (got some x and y coordinates mixed up in a place or two), and introduced a way to load grid-based maps, with an option to split the grid up into supertiles of a specific width and height.
So go download it again!

In my "demo", I use a grid for the back layer, which is turned into 3x3 supertiles. Seems to work, but I'll have to do some more tests.

Yay.

Just added another tile type : BitmapTile.

You'll need to add a bmp property to your layer to make use of it. This can be any DisplayObject, but will most likely be a Bitmap or a Loader.
The tiles are cut out of this DisplayObject using their index and size, and the size of the bitmap. Basically, if you have a tileset image, the first tile will have index 0, the one next to it 1, etc.
A layer that uses these bitmap tiles can still use normal tiles like other layers, and bitmaptiles can be placed in supertiles just like other tiles - so it can all be mixed.

Some feedback would be nice.

Edit : transformGrid isn't working properly - the displayed result it okay, but still needs to be fixed.
Edit2 : Think I fixed it, fixed version in the download.

This is advancing real fast :)

And it runs pretty fast as well (I tested it on my old MAC at work and ran pretty good)

Besides the xml feature, do you have plans to add anything else?

Yeah, I do have a few things in mind :

A SpriteLayer. I'm not talking about the new Sprite displayObject, but the traditional meaning of sprites - players, enemies, etc. But I haven't thought much about how to implement this yet.

Being able to move tiles around. This would mean I'd need to give tiles an identifier name, so you can reference them, and I'd also have to move tiles from one "screen" to another.

Splitting up the setup calculations over multiple frames, to prevent the player from hanging. I'd have to reorganize large parts of the code, but it might be worth it because it would allow larger or more complicated maps.

A level editor. This level editor could do some of the pre-calculations and deliver the map in a slightly different format, so the engine would know it wouldn't have to do these calculations up front.

Not sure when I will (try to) implement all of this. I might even port my platform engine to AS3 using this engine, but I don't think I'll be giving this away.

Quote:

---

And it runs pretty fast as well (I tested it on my old MAC at work and ran pretty good)

---

Cool, but I'm guessing it will slow down a bit when more tiles are used. But it will hopefully still be fast enoughto run at a decent framerate.

If anyone plans to use this, I'd like to know. Rolling your own scrolling engine might be more rewarding, but this is there for anyone who wants it, and I think it runs pretty good, and it has a lot of features already.

Just realized that the way I store bitmapdata for BitmapTiles isn't a very good way to do it, memory-wise - for each tile, I cut out the needed part of the bitmap, but there will probably be a lot of tiles that need the same part. So I'll need to rethink this.

Okay, fixed the inefficient way I stored the BitmapData tiles. I know have a BitmapDataCache object per layer, which keeps copies of bitmapdata I cut out of tilesets, and my actual tiles just store a reference to this. Neat :)

Whey, another update!
I split the pre-calculations over several frames using events. I doubt it was a problem doing it in one frame though, but for very large maps, the Flash Player will have it a bit easier.
It does mean that the engine only starts working after two frames, but that shouldn't be a problem for anyone.

I should start thinking on how to handle a sprite layer now. My initial idea is that this is just an empty container to which the programmer can add DisplayObjects himself, using some functions.
When one of the sprites leaves or enters the screen, an event would be dispatched, notifying the sprite that it should do something - remove or add itself from/to the layer, but it could be a number of other game specific things. I don't want to automatically hide/remove sprites, because there may still be things going on offscreen, like collision detection etc, so it should be the game that handles this.

I might also add automatic but optional Z-sorting for top-down views, but that may be a bit too specific to add to the scrolling engine.

Any thoughts or advice on this?

Hi all,

Could you please check this out? http://www.gamesquid.com/TileSQUID/Game.html (FP9 required) and tell me how well it runs? It's smooth on my computer, even if I open the swf 10 times simultaniously, but I'd like it to know how it runs on other pcs.

The map was made with Tiled and my engine now loads the xml (not in the zip yet because it's not stable atm).

Graphics were custom made by a pixel artist for a game I'm working on (which I plan to port to F9 now).

(Both the graphics and map are still work in progress versions btw).

Put an FPS counter on it.

K, just a sec...

Added the FPS counter. It's set to run at 120 fps now, on my computer I'm getting a steady 65 in Internet Explorer (even with multiple versions running simultaneously), and about 110-120 in the standalone player.

Note that I'm not cleaning up everything correctly yet, so if you keep it running for a very long time, or if you don't have a lot of memory, it might start to slow down (haven't tried yet, and I actually doubt it, but it's very well possible).
Edit : nevermind, just checked my task manager and memory useage stays at about 30mb when using the standalone player, and it doesn't increase, so that seems to be ok.

I suggest you set it to 30, and don't aritifically inflate it with setting it so high.

58-65 under firefox

I agree w/ UnknowGuy......I always see these demos/tests set to 120 fps, and it's kinda of annoying, since it is artificial, once you got everything else in there and it becomes a real game....so set it to a realistic 30 fps and we can give it a real run and tell you then......at this point I'm bouncing between a 61-64 in latest IE, on a 2.1 ghz amd laptop w/ 768 mb of ram, and a 128 mb v-card.....

but I'd like to test it when you have it 30 fps....

paul

PS: it's quite jerky too.....

Not sure why I'd want to test it on 30 fps - I'm pretty sure even very slow computers are able to run it at 30 fps, so that wouldn't really give me any information? Or am I missing something?
By setting it at the maximum, I can see how well other computers handle it. Could you tell me what downside it has?

Well, not sure about the jerkyness, I noticed that too but only on one computer (with a flat screen), not on the other one with a normal screen, so I thought it was an issue with the screen. It's probably the flash renderer. Either that, or the unstable fps due to it being set so high. I'll see what I can do.

Quote:

---

Originally Posted by tonypa

...I also have not yet seen any significant speed increase in AVM2, the perfomance in drawing the graphics is same as before and while the code executions may be faster there are very few games running so much code that it slows down the game.

---

Did you see that ???
Flash 9 required :)
Additional info :)
Tip: if you wait 10 secs or so and the dinosaur stops dancing you can control the view using your mouse.

When i first saw that, I was totally shocked. :)
The good news about this staff are:
- some portions of this engine will be opensource;
- in the next few weeks there will be another post of this engine with some Quake levels :P

That's pretty cool, I'll have to keep an eye on this 3d project.


As for the jerkyness in my engine, I just tried on a slower computer than mine, and saw it too, but I think I know what's causing it :

- cacheAsBitmap, which should make the scrolling faster, but it's also slowing down the engine when I'm adding/removing tiles, especially since removing tiles is split up over multiple frames. So I'll try disabling cacheAsBitmap until all my adding/removing operations are done, and then enable it again.
- I'm using a load of very small (24x24) tiles for this map, in seperate layers, using bitmapdata, and adding them to the map just takes some time. So I'm now experimenting with a way to cache supertiles as bitmapdata, so I don't have to generate them each time. This will be optional per layer, so you can still have a layer for animated tiles.

Hope this will make it smoother on slower computers. However, a 2.1 ghz laptop like Pentru has should be able to run it pretty well though, because I tested it on a similar machine without problems.

Ok, I made a version running at 30 fps. I tried removing all the jerkiness, and here's the result :

http://www.gamesquid.com/TileSQUID/30fps.html

It should run at about 24 fps in a browser.

To the right you'll see a list of numbers. These indicate how much miliseconds my update routine takes to calculate each frame, with the latest frame at the top. On my computer, this list is constantly showing 0, with an occasional higher but still accetable number.

Please let me know if these numbers are significantly higher on your computer, along with your specs. Would really appreciate it.

If the numbers are low, but ti's still jerky, then I'm afraid there isn't much I'll be able to do about it - the numbers indicate how long my code takes to execute, if it still lags somewhere, it's probably something with your computer as far as I can tell.

The memory useage has increased a bit (doubled actually) because I now cache some more things, but this is optional in the engine.

EDIT: btw, if anyone is interested in how the engine updates the screen, just go to http://www.gamesquid.com/TileSQUID/30fps.swf and maximize the browser window. If you don't get how a scrolling engine works, it might give you some insight.

EDIT2:I just opened the engine 12 times in different browser windows simultaneously, and the framerate didn't drop one bit, so I'm guessing that's pretty good. Now I really need some more feedback from you guys. I want this to run as fast as possible before moving on to adding new stuff.

Crap, why do I have to spend another $700 to buy flash again.

works smooth for me: 23-24 in FF
P4 2.8 1Gb RAM GeFORCE5200 + two monitors - my workstation :)
10-13% CPU use in the task management window.
The right column filled with 0 numbers ocassionally changed to 10 and then jumps down to 0.

Thanks for testing!
Whenever you see a higher number to the right, the engine is adding new tiles to/removing old tiles from the screen.

Since I split up my map in supertiles of about 192x192 pixels, and pre-cache those supertiles as bitmaps (hrough code off course), all that's happening in those frames is that a few Bitmaps are created, with cached bitmapdata attached to them. However, this happens on 3 layers, so that would explain why it's taking 10 milliseconds to do this.

One option to make it even faster is adding offsets to the automatically generated supertiles, so they don't all start on the same positions, and adding the supertiles gets distributed over multiple frames. Sounds like a plan.

Besides pre-caching the supertiles as bitmapdata, I'll also create an option to cache the supertiles in runtime, and always remove the oldest from the cache. For larger maps, this should be a lot more memory-efficient, but for small maps that use a lot of tiles (ie top down games with small tiles), pre-caching seems like the way to go.

I'd like to see some more people test this and tell me how well it performs on their systems.

same laptop as above testing......getting a steady 23-24 fps ......the jerkiness is almost non existent....I also get a constant "0" in the right column.

there is some occasional flickering though....and I get that in my bmp scroll engine as well....and I've seen that problem as well in others.....maybe screen frame rate versus flash rate....don't know ......

anyway, it's good :)

I'm not sure if this might sound dumb or something....but why would you bitmap cache what it's already a bitmap to begin with (gif/jpg...etc)...I thought one should bitmap-cache only when dealing with vector data......since a bitmap (jpg/gif) is already considered as such by flash.......or maybe I'm misunderstanding what you're doing...

paul.

I bitmap cache supertiles, so I don't have to generate them when they move on screen. A supertile can be made up of a lot of tiles (I'm using 8x8 regions, so 64 tiles), and this takes a while to generate. So by pre-generating these tiles and caching them as a bitmap, I just need to add the bitmap to the layer.
I also cache layers, using cacheAsBitmap, to improve the scrolling. This is what was probably causing the jerkyness, because I forgot to turn it off while adding/removing tiles, and it had to be regenerated a couple of times during these frames.

I get the flickering too on my flat screen, but not on normal screen. You're probably right in saying it has to do with screen/flash refresh rates. A vsync option would probably solve this, but alas, I don't think this is supported (it wasn't in previous version of flash, and I doubt it is now).

Thanks for checking!

Wow this is looking awsome, i got 24 solid in ff and 0's all the time...

I'm looking for someone who would want to help me on this. Basically, what I'd want is someone who could help me optimize as much as possible. I've done some big changes to how I cache supertiles (previously using bitmapdata, now I just unparent the movieclips, and use a Timer to empty the cache every 500ms) to make it more memory and cpu efficient, and some other things, and would like to make a release it soon, but I want to make sure it's as good as possible.

So any experienced developers (doesn't matter if you know as3 well, you'll learn), let me know if you want to help me out.

Off course, if you want to help me out on other aspects (new features etc), that's fine too.