I really do love the simplicity of one-touch mobile games. They’re just so much more accessible to a casual audience compared to modern console games that typically require you to mash a thousand different buttons. However, their apparent simplicity may mislead many to think that such games are easy to make. They’re actually anything but.
With the official release of the Starling Framework, and the availability of AIR 3.2 RC I thought I’d have a bash at creating the scrolling tile map used in Halfbrick’s excellent Monster Dash game. You can see my efforts in the video above, where I managed to get it running on iPad 2 at a rock solid 60fps. It currently manages a respectable 30fps on iPad 1 but hopefully I’ll find some time to try some more optimizations. I was also curious to see if Starling was helping to alleviate the strain on the CPU. A quick check using Instruments on Mac revealed that my ActionScript was consuming only 10% of the CPU, which was really encouraging.
I’m really looking forward to seeing what others in the Flash community produce with the various frameworks that are built on top of Stage 3D.
Hi.
Nice work.. May You publish source?
Regards
Thanks Edi. I’ve still got some things to finish off with the code and to tidy it up a little. I’ll let you know when/if I get round to making it available.
Really Nice! Can i get the source as well?
Thanks.
Thx Chrostopher. Would love to see how this published on an Android device.
This is a bit disappointing, iPad1 should be able to run this at 60 fps. If we consider all the animations and particle fx that must be added to complete the game, we would get a very low fps on the iPad1.
i am interesting how simple scrolling is build. ur work looks very good.. i am new with starling because asking about that.
Hello, nice example! Is there any kind of lag periodically caused by garbage collector kicking in?(or is the video itself making that illusion) In my tests with Starling memory usage is always increasing causing noticable lag when the g.collector empties the buffer.
There’s no lag. I think it’s caused in the video by my shaky camera hand. I use an object pool for the map’s blocks to prevent repeated allocation and deallocation of memory.
Amazing work! We are now developing a similar scrolling background moving a simple png (1024×100) but we can’t achieve more than 30 fps on iphone 4 (it’s very jerky at 30 fps, and we don’t know why). Never tried on Ipad 1 but i think that achieving 10 fps would be a great success! I am curious about your technique of translating textures, you’re moving UV’s? Or starling viewport?
Thank you (very good job again!)
Hi. I just realized that the lag I mentioned was caused by the currently available port of Mrdoob’s Stats class. It is a contribution work in progress. That’s why I stick with the original one for now.
Ah! Thanks for the info Foul!
This is a great post and great discussion. Here is more!
Intro To Starling Framework w/ GPU-Acceleration!
http://bit.ly/ygjJyY
Starling Can Use Vector – Dynamic Atlas!
http://bit.ly/yokYMw
Angry Birds Launches onto Facebook w/ Starling
http://bit.ly/ypNKVN
Thanks for the links Samuel!
Hi Alessandro,
I’m moving the UVs for the background and middleground bitmaps. The foreground scrolling wall consists of vertical strips of size 128×512 pixels each. As one strip exits the left-hand-side of the screen, another strip is added to the right-hand-side of the screen. The strips are instantiated up-front and held in an object pool. When a strip leaves the screen it’s added back to the pool. When a new strip is required, one is taken from the object pool.
While the iPad 2’s GPU can handle just about anything you throw at it, the iPad 1 is struggling due to the number of redraw regions its having to deal with on each frame. For example, my foreground walls often touch both the background and middle layers, causing both layers to be completely redrawn, which seems to be too much for the GPU. I’ve not had time yet, but I’m going to ditch the UV approach and try cutting the background and middle layer into tiles to help minimize the number of pixels that will need redrawn when the wall slices touch them. I’ll let you know how I get on.
Thank you very much for your fast answer! For scrolling events in your opinion am I correct if I say that it’s better to use like two 512 x 128 textures instead of one 1024 x 128? Thank you twice
the same problem,1 – 2 frame freezing (stuck,hesitation)
Excellent demo! Very encouraging for Flash Development with Starling targeting iOS devices 😀
Awesome, I would love to see your source code if available!
Great work man!
That’s a seriously impressive example Christopher, and after watching it I decided to give Starling a go for the first time.
I’m hoping someone will be able to help. I’ve recreated the Monster Dash scene in it’s most basic form. 3 layers, sky, city, and running path. The running path is just a continuous texture for now, not single tiles. (walk before I can run).
——–My Source Code so far: http://www.sendspace.com/file/ptg4ra
My understanding is, I have to embed each png and add these as textures to each Image, which I have done. I also understand that in your example, you are moving the UV offset (texture position) for each layer, rather than the actual Image. I have also done this for each layer, at varying speeds.
Problem is, it’s nowhere near as smooth as your example. So i’m missing something critical, or most likely not using the correct technique.
1. I’m exporting for iPad (I’m using ‘The New iPad’) at 1024 x 768
2. I’m using Air 3.2, and have added -swf-version=15
3. Latest version of Starling.
Again, I’d really appreciate any help from anybody on this. Take a look at the source code, rip it to shreds, as I said I’m new to this but really want to get it right!
All the best.
A great demo.
I also made a complete game with Frameworks Pixlib and Starling.
You can play here : http://www.actionscript-facile.com/ressources/assets/src-afterburner/index.html
And download the source code in this french tutorial : http://www.actionscript-facile.com/afterburner-jeux-flash-pixlib-starling-framework-partie-1/article1225743.html
This game runs at 45fps on a Motorola Milestone 2, and uses less than 7 MB of Memory. Download the apk file and source code : http://www.actionscript-facile.com/afterburner-jeux-flash-adobe-air-android/article1226093.html
Hi Luke. I’ll try and get a look at your code over the weekend and see if I can spot anything obvious for you.
Hi Matthieu,
Your game is really great. Thanks for sharing the code. Really looking forward to looking through it.
Really appreciate that Christopher!
Thanks!
Hi Luke,
I’ve tested your code on my iPad 2 and it runs at a rock solid 60fps. Perhaps there’s some characteristic of the iPad 3’s GPU that is causing problems with Flash and Starling, or perhaps you’re creating an interpreter mode or debug build – something I’ve accidentally done before.
However I have gone and made some changes to your demo after finding a few things that may be causing issues. Although on a device as fast as iPad 3 I’d be surprised if they were actually causing any noticeable slow down. Anyway, here’s the list of changes I made:
1. I used the most recent version of Starling – Version 1.0.124. Previous versions had a bug that was affecting the GPU performance on iPad 1. Although I don’t believe this was an issue on iPad 3, I thought it best to use the latest version.
2. I noticed you scale-up your images at runtime before adding them to the display list. I’ve removed the runtime scaling and instead, scaled the original bitmaps in Photoshop instead.
3. After scaling the background_mid.png in Photoshop, I noticed that the top half of the image was simply made of transparent pixels. I cropped the image to remove this unnecessary data. My cropped version still has dimensions that are of a power of 2.
4. Inside your onUpdate() handler you create 4 Point() instances to manage the UV coordinates of each image. With 3 images being managed that’s 12 allocations per frame update or 720 per second. It’s always best to try and reduce the number of memory allocations as they can be expensive and also eventually lead to the garbage collector kicking in, which can cause your app to stutter. I’ve changed your code here to use a single temporary Point object for all the UV coordinate calculations.
5. Your scaling array was being created on each call to your onUpdate() method. Again, memory allocations can be CPU expensive so I’ve changed it to a static constant that’s declared at the top of the class. I also changed it to a Vector type rather than Array, since vectors can be accessed faster than arrays.
6. I also changed you imagesArray to a Vector. Again, it might give you marginally better performance.
7. I think there are one or two other optimizations that I commented in the code too.
I’ve sent along the new version of the code to you. Other than the removal of the run-time scaling, I’m not sure you’ll get any noticeable benefit in performance. Unfortunately I don’t have access to an iPad 3 so my changes are all just a shot in the dark.
Please let me know if any of my changes helped or if you find some other way to solve your issues. If you are still struggling then please speak to Daniel (lead Starling developer) on the official Starling forums (http://forum.starling-framework.org/). He might be able to identify why you are having these issues.
Good luck!
Hi Christopher,
Sorry for the delay, been snowed under so haven’t had a chance.
I’ve compiled the updated files as a release build, but still not getting really smooth motion of the background / foreground. Perhaps this is down the the way in which I am repositioning the Images in the EnterFrame. I haven’t tried adding an FPS counter, so perhaps the movement is jerking, but it’s still achieving 60fps…
I have found a similiar type of example using the Starling framework which I’ve compiled and runs extremely smoothly on the New iPad (so assume it’s also smooth on the iPad 2) I will upload the project files later if you’d like to have a look through them.
I also posted the earlier source files on the Starling forum, and Daniel has replied to say he is currently working on a performance guide for iOS which he should be releasing as a Wiki sometime soon.
I’ll continue working on my example in the meantime, and if I get further achieving the fluid Image movement, then I’ll let you know.
Thanks again for all your help, really appreciate it, and I’ll let you know how I get on.
All the best!
Thanks for getting back to me Luke. It really is odd you are experiencing problems with your demo. When I tested it at my end it ran perfectly on my iPad 2. Let me know if you get the issue resolved. Thanks.
Very nice ! So gorgeous ^_^
Hey, hi to all! Personaly to Christopher and LUK ho I want to ask show me latest source code of endless scrolling, about which chapter discussed above. I’m making my own game – endless runner – you can look it at here: http://vasilevich.by/ZombieYou/bin/index.html – USE ARROWS TO CONTROL A CHARACTER
Maybe this code and principles let me improve my code of game.
Hi letsrock85! You can find source code on GitHub: https://github.com/ccaleb/pixi-parallax-scroller
It’s actually for a JavaScript version of my Monster Dash clone and uses Pixi.js instead of Starling, but the general architecture and performance optimisations are the same. The Pixi API is quite similar to Starling’s so it should all feel familiar to you.
Hopefully I’ll get some AS3 source code onto GitHub once I’ve tidied it up but not sure when that will be. The JavaScript code should help you though.
I really like your endless runner game by the way. Nice!