AS3 Starling Timer vs. DelayedCall

As a long-time AS3 coder, I’m very used to using AS3′s Timer class. For my Starling game tutorial, I even extended it and created the GameTimer class where I added the ability to pause the timer and some other things. As I’ve been working more on my game based on my tutorial engine, I’ve realized that I’ve made a huge mistake in the way I coded the Timers. Namely, in Starling… well… The Scenario Let’s say you’re implementing an enemy spawn timer into your game. You’ve got a number of enemies in the wave (say, 5) and a set amount of time (say, 1500ms) that you want to wait in between spawning each enemy. Without Starling, you would be using some variation of AS3′s Timer class, and your implementation would look something like the following: 1 2 3 4 5 6 7 8 9 10 11 // create a new Timer instance that has a 1500ms delay and repeats 5 times var timer:Timer = new Timer(1500, 5);   // a new enemy spawns every time onTimerTick gets called timer.addEventListener(TimerEvent.TIMER, onTimerTick);   // to keep track of when the whole enemy wave is done spawning timer.addEventListener(TimerEvent.TIMER_COMPLETE, onTimerComplete);   // when ready to start the next wave… timer.start(); While this would work perfectly fine in your Starling game, Starling has a secret Timer class built-in called DelayedCall. I call it “secret” because it exists in the starling.animation package (our spawn timer isn’t animated why would we use something from animation?) and doesn’t immediately jump out at you when looking over the API docs that this secret class can be used as a timer, but it’s exactly what the class is written for. So first, why would you not want to just use Timer? Let’s use a band analogy. You’re the guitarist in […]

Read More…

Demo Updates – BitmapFont Working!

I’ve updated my AS3 Starling TD Demo today. Thankfully, a very courteous person emailed me today letting me know that my Bitmap Fonts were not showing up if you didn’t actually have the fonts installed on your machine. Whoops! Now that the BitmapFonts are actually working using the proper output from Glyph Designer, I think I need a few more tutorials on how to use that program. Let’s just chalk it up to my complete inexperience with Glyph Designer, but, I wanted to use the same font and have it be different colors in different TextFields. And the problem with this is that it seems if your font png that you export from Glyph Designer has a color (solid/gradient) that if you try to tell the TextField.color that you want this TextField to be white (0xFFFFFF) it tried to blend the color of the BitmapFont with white… never really giving me an actual crisp white that I wanted. Also, in some other case when I tried to assign a color to the TextField it seemed to think I was saying “I want no fill color at all” and you could see through the letters. I’m almost positive this is all my own fault. I updated some of my posts to include the minor code changes I made to a few files. They’re mostly very small x/y/fontSize kinds of changes. So what was the culprit? When I exported my fonts from Glyph Designer, I chose “.fnt (Plain Text)”. Well, I didn’t “choose” it, it’s the default setting. My eyes read “FNT” and my brain said “Yup! That’s the file type we want! Export it!” and really if I would’ve clicked the dropdown, there’s a “.fnt (XML)” that I should’ve changed it to. So now the *.fnt files are all actually XML. […]

Read More…

AS3 Starling Tower Defense Tutorial – Part 11 – Conclusion

This entry is part 11 of 11 in the series AS3 Starling Tower Defense Tutorial

We made it! Ten blog posts written in one month, averaging about 5,200 words per post (though most of it is code) is definitely a new record for me. I’m glad to be done with this phase of the code. My plan was always to get this demo working, write a tutorial series so that other people can do this easier, then take the same codebase and continue building with it to make a few games. So now it’s time to get to make a few games! Woo! I wanted to wrap up the series going through some things I learned along the way. Maybe “postmortem” would be a better title but that sounded a little pretentious since I just made a little demo, not a real game like the big boys. I’ll get there though soon enough. Thoughts on Starling I had started a tutorial series before this on creating a straight AS3 game engine. I had made it through about 3 posts, discussing loading assets, enemies, and generating your tile map by blitting “by hand” (well, without Starling). It was going in a good direction then I remembered something called Starling and that it was supposed to make games faster, better, more FPS, less visual lag, all GPU-jacked-up and a hot new engine on the block. I stopped that series (and even removed it from the site) because I wanted people to focus on this series; I wanted to focus on this series. I wanted to take Starling for a spin and see how it did, then I wanted to write about it because telling Biscuit, my kitty, all about flattening Sprites and game ticks with the Juggler, he was not amused. Maybe he was? I dunno, he kindof has the same face all the time. Smile Kitty, […]

Read More…

AS3 Starling Tower Defense Tutorial – Part 10 – Bullets, Collisions, and Managers

This entry is part 10 of 11 in the series AS3 Starling Tower Defense Tutorial

I’ve showed off a few Manager classes so far. We walked through the EnemyManager, TowerManager, and SharedObjectManager. We’ve talked about enemies taking damage from bullets and towers somehow magically having an array of enemies that are in range. We’ve talked about UI components on the screen but never how they got there or how those individual components create the game. In this post, we’re going to spotlight the Manager classes. Before we start, feel free to check out the finished product of my AS3 Starling TD Demo. You can also find all of the code used in srcview. Or you can download the whole project zipped up. Or check out the repo on Bitbucket First, though, why the “Manager” classes? “Hey I didn’t see that pattern in the GoF Design Patterns book! This is nonsense!” As I’m writing this, I did a bit of twiddling with the google-fingers for design patterns and manager. Seems there’s a bit of back and forth on if you should officially call something a “Manager” class or if … blah blah. Calling these classes some other word besides “Manager” seems like we’re just haggling over semantics. These classes Manage a specific game object (EnemyManager, TowerManager, BulletManager), or specific game functionality (CollisionManager, KeyboardManager, HudManager), it’s just what these classes do. They manage that functionality. So, that’s where we’re at. I have a bunch of Manager classes and we’re going to start by taking a look at the CollisionManager first. CollisionManager.as What does the CollisionManager (“CMgr” from here on out) do and why is that even a class? Let’s play out the thought experiment… “In a world… where the CMgr doesn’t exist… never did… and never will, every class is in charge of managing it’s own collisions. Coming this summer… or maybe next year when every object […]

Read More…

AS3 Starling Tower Defense Tutorial – Part 9 – UI Game Components

This entry is part 9 of 11 in the series AS3 Starling Tower Defense Tutorial

In my previous tutorial on UI Menu Components I went over several UI components that mostly were found outside of the main Play State. The GameOptionsPanel is used in the Play State, but by “UI Game Components” I mean more the components that make up the HUD, the gold and HP counters, enemy healthbars that change when the enemy gets hit, those sorts of things. Last post was awful wordy, so this time we’re just going to get straight to more UI components! Before you start, feel free to check out the finished product of my AS3 Starling TD Demo. You can also find all of the code used in srcview. Or you can download the whole project zipped up. Or check out the repo on Bitbucket NextWaveButton.as Problem As a player, in the Play State, at the beginning of a new Map I need to know where the badguys are going to be coming from (where they enter the map). Solution I need icons to represent where the enemies will enter the map and which direction they’re headed. It needs to stand out a bit from the square-ish nature of the tile map, so maybe some circles. And it should probably be animated or have some way of jumping out at the player so they know they can click the icons to start the game. Execution I’ve added these little green circles to my tilesheet. They show up on the road next to where an Enemy group will be entering from. We need to make sure that the we grab the right texture so the arrow points in the correct direction, but other than that, this button is pretty simple. Oh, it also uses TweenLite to scale bigger and smaller so it grabs the player’s attention better on the […]

Read More…

AS3 Starling Tower Defense Tutorial – Part 8 – UI Menu Components

This entry is part 8 of 11 in the series AS3 Starling Tower Defense Tutorial

Bad UI will tarnish every good game design decision you’ve ever made about your game. So, you’ve finally finished your game. It has well-thought-out gameplay mechanics that you perfected by talking it out (to yourself in the shower). You didn’t even know you were so clever until you started writing dialogue for your characters, now maybe you can leave coding behind and be a game writer? Maybe write for Conan? Yeah, totally. Now, you did spend way too much time running around with a sound recorder near your parents swimming pool to get that raw water sound you needed for that one level, but the sound design is superb you must say. You finally figured out Photoshop well enough to know that those filters are meant to be used by people that know what those settings mean, and who intentionally change them to make something interesting, not just willy nilly changing settings til something doesn’t look awful. And as best you can tell, your code was 100% bug-free when you uploaded it. You’re a gaming success story and tomorrow you’re sure all your indie game heroes will be emailing you. “They’re not just stupid games now are they, dad!” you’ll get to yell on the phone, self-righteous, vindicated by your success. But… you overlooked one tiny, massive thing. The UI. The reviews start rolling in. “…had to wait through a whole minute of intros and story before the main menu. A minute! For a flash game!” Well, there were a few logo animations I really had to have for the sites I posted it on, and I wanted the user to hear the clever story intro I wrote right up front at the beginning. “…no info/feedback on what specific upgrades actually do for the player, you can level up “Gold” […]

Read More…

AS3 Starling Tower Defense Tutorial – Part 7 – Sounds, Stats, and Saves

This entry is part 7 of 11 in the series AS3 Starling Tower Defense Tutorial

We’ve knocked out the Big 2 posts already. Enemies and Towers have just been covered. Now we’re going to lump together Sounds and sound management, specifically with TreeFortress’ SoundAS. Then we’re going to take a look back at stats or “Totals” as the code refers to them (sorry for the misleading title, but ‘stats’ started with an ‘s’ and fit the pattern, but it’s really “Totals”). And finally we’re going to tie Totals up with a bow and make it persist wiiiith… our SharedObject Manager. I wrote this sucker myself, so you can blame me* when it decides to wipe three weeks of your hard-won stats. *Note, please don’t blame me if this code does something unexpected! Before we start, feel free to check out the finished product of my AS3 Starling TD Demo. You can also find all of the code used in srcview. Or you can download the whole project zipped up. Or check out the repo on Bitbucket Onward! Sounds Now that I look at it, I really don’t do a whole lot at all with sounds in this demo. It’s all very basic but I’ll walk through it nonetheless because a Flash game (or any kind of game) without sound is a very bad idea. Let’s revisit the whole process, starting with my initial sounds.json file. Really quick though, in case my point hasn’t been made enough times in previous posts regarding loading files manually and not embedding them in your project, let’s take this very short list of sound files below and do some thought experiments. Imagine you’ve got a game completed and it’s posted up at Kongregate or ArmorGames. You chose to go the route of having all of your sound files embedded in your project via [Embed(source="path/to/my.mp3")], but now you want to change […]

Read More…

AS3 Starling Tower Defense Tutorial – Part 6 – Towers

This entry is part 6 of 11 in the series AS3 Starling Tower Defense Tutorial

After five long code-heavy tutorials, we finally arrive at the most central of components to the Tower Defense (TD) genre: Towers! Towers are crucial in your TD game. Now, by “towers” I don’t necessarily mean some phallic, stone structure jutting into the sky that rains death upon enemies nearby. “Towers” here could be any unit, object, creature, etc that the player can place on the map, that can impede the enemies from reaching their destination. Some games may have actual tower structures, some games may have army guys with bazookas, some games may have a house or spawning structure you place nearby and the player’s units spawn from there to stop enemies. The tower is the primary mechanic that empowers players with a way to experience strategy, tactics, accomplishment, and fun (not an exhaustive list of nouns!). That said, unfortunately I really don’t do the tower justice in this demo. If you’ve played the demo, you’ve seen that my two Towers are simply a blue and a red box. The enemies are animated and much much prettier than the towers. Hell, even the bullets have some particles with them and are prettier than the towers. Anyways, here’s the point. I showed you last time how I created the Enemy animations. You could do the exact same thing for Towers and have yourself some pretty animated towers with different states “reloading”, “firing”, etc. Before we start, feel free to check out the finished product of my AS3 Starling TD Demo. You can also find all of the code used in srcview. Or you can download the whole project zipped up. Or check out the repo on Bitbucket **Update 8/1/13 – abstracted out Tower’s enemy-finding strategy to a ITowerStrategy.as and TowerStrategyNearest.as. Also added some commentary on design patterns. Ok, like the previous […]

Read More…

AS3 Starling Tower Defense Tutorial – Part 5 – Enemies

This entry is part 5 of 11 in the series AS3 Starling Tower Defense Tutorial

It’s finally time to get into the good stuff!  In this post we’ll be looking at enemies and how they get set up, run through, and knocked down. We’ll look at how I’ve created some JSON metadata in the map JSON file to set up the types of enemies the map will contain, the sounds to use for those enemies, the different enemy groups that can be in a single wave, how those groups are defined, and how individual enemies are created inside those groups. Let’s take a quick high-level view at how I’ve structured my data and my classes. We’ll get to the actual JSON in a sec. Before you start, feel free to check out the finished product of my AS3 Starling TD Demo. You can also find all of the code used in srcview. Or you can download the whole project zipped up. Or check out the repo on Bitbucket JSON Data Structure I’m going to hit EnemyWaves first, since the other two relate more to each other. Enemy Wave data here doesn’t pertain to an actual class file in the project, but it is used by the classes as a sort of map/hash set. For example, when the user starts the game and the first wave tile at the bottom of the screen “spawns”, that wave tile has an id of “wave1″. So the EnemyManager class will go through and say, “Ok, ‘wave1′ needs to spawn, which groups should I use?” 1 2 3 4 { "id": "wave1", "groups":"group1", }, When ‘wave1′ spawns, the EnemyManager will check those “groups” which correspond to the ids of the EnemyGroups below. So ‘wave1′ spawns and EnemyManager goes to find EnemyGroup id ‘group1′ and tells it to begin spawning. An EnemyGroup is a collection of Enemy classes (and subclasses) that […]

Read More…

AS3 Starling Tower Defense Tutorial – Part 4 – Map Tiling

This entry is part 4 of 11 in the series AS3 Starling Tower Defense Tutorial

Map Tiling in AS3 was the first post of my short-lived AS3 Game Engine series before I found Starling. While the core tile drawing code remains mostly the same, there have been some changes. We saw from yesterday’s post that the Play State creates an instance of the Map class and passes it the map JSON data Object. Let’s take a look at the JSON file that holds the map data, then we’ll look at the Map class and see what it does. Feel free to check out the finished product of my AS3 Starling TD Demo. You can also find all of the code used in srcview. Or you can download the whole project zipped up. Or check out the repo on Bitbucket I’m not sure if I’ve mentioned this yet, but I am using TexturePacker to create my spritesheets/tilesheets (is there a difference? semantics?). TexturePacker makes creating these tilesheets stupid easy and quick. If you can save your png images into a folder, and if you can remember that folder so you can find that very same folder again… you can make tilesheets using TexturePacker. They have tons of tutorials for using the app, and Lee Brimlow makes a three-part excellent spritesheet/basics-of-blitting tutorials over at GotoAndLearn (part1, part2, part3) Map JSON Data We’re going to look at the map data from the second map I made. Here’s a screenshot of the map actually in the game, all drawn out, tile-by-tile. These are all tiles I made out of 24×24 tiles in Photoshop. Here’s a sample of the tiles that are in my tile sheet. This has clearly been enlarged and is a little pixelated, but it’s 24×24 pixel art, there’s really not a whole lot of room for smooth lines. This image is here to show that I’ve […]

Read More…

AS3 Starling Tower Defense Tutorial – Part 3 – Play State and Config

This entry is part 3 of 11 in the series AS3 Starling Tower Defense Tutorial

Last post we got into the various game States that I use in my AS3 Starling Tower Defense game demo. I left out Play because it’s pretty big and needed some cleaning up. Now I’ve got it all cleaned up and ready to go! Also, I had intended this post to get into Map Tiling at the end, but this ran long and I wanted to show the Config file since that’s used in so many places. So Map Tiling will come later. This is the Play State and my Config class. Quick note… I’ve removed all of the doc blocks from functions to conserve space here… Comment your code! Also, feel free to check out the finished product of my AS3 Starling TD Demo. You can also find all of the code used in srcview. Or you can download the whole project zipped up. Or check out the repo on Bitbucket Play.as The Play State (com.zf.states.Play.as) is the main point of the game. It’s the State where a map gets drawn, enemies spawn, towers get placed, and the player hopefully has a great time. After a player has selected a map from the MapSelect State, we know the map ID they chose and the MapLoad state actually loads in the map JSON file and gets it ready for Play to do something with it. Play is also the creator and maintainer of most all of the “Manager” classes used in the game. We’ll start off with the constructor and the addedToStage functions. Since this is such an important class, I included pretty much everything here. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 […]

Read More…

AS3 Starling Tower Defense Tutorial – Part 2 – Game States

This entry is part 2 of 11 in the series AS3 Starling Tower Defense Tutorial

In my previous post on External Loading using LoaderMax in Starling, I began going through the first State of the game, the GameLoad State. This post will go through each game state in detail as to why it’s there and what it does. Also, I show off and talk about a few UI components that I’ve created as they come up in the various States. Before you start, feel free to check out the finished product of my AS3 Starling TD Demo. You can also find all of the code used in srcview. Or you can download the whole project zipped up. Or check out the repo on Bitbucket **Updated 8/9/2013 – added the Upgrade State So, the following game states can currently be found in the com/zf/states/ folder: GameLoad – the very first state! This is in charge of loading all of the initial assets and sounds and was outlined in the previous post GameOver – this state provides post-battle/map feedback to players. Did they win? Lose? How many enemies did they kill? etc… MapLoad – this state is in charge of loading map-specific assets which I’ll cover later MapSelect – this state displays whatever “Map/Level Select” info, it also holds the Upgrades button to take you to the Upgrades State (when finished) Menu – this state is your main Title/Menu type state. It’s the first screen the player gets to after the main game loads Play – this state holds the actual action. It’s the biggest and most complex of the states. Test – this is just a dummy state I created when I wanted just a blank IZFState Sprite to load to. It provides a quick way to jump straight to an empty screen so you can test UI components by themselves without having to go all […]

Read More…