AS3 BackboneJS-style Model Experiment Pt. 2 – Target Value Model Events

As we saw in AS3 BackboneJS-style Model Experiment Pt. 1 (definitely read through that first!) I created a BackboneJS-style model for use in AS3. You could listen for any change on the model, or for a specific property on the model to change. This got me thinking though, let’s go back to my previous example where you have a “mana” property on the PlayerModel changing, and you have 6 Tower Icons that are listening for ‘change:mana’ and they’re having to check if the changed mana value is greater than or equal to the cost of the individual tower to know if the Tower Icon should “activate” visually and become clickable so the player can place a specific tower. This means that every single time that single property changes, the Tower Icon is having to do a check to see if it should activate or not. Now, as we saw last post, that’s a lot more efficient than just getting a “change” event any time anything on the model changes… but, why can’t we give a specific Target value we’re looking for when we add the event listener? Enter TargetModelEvents! We looked at most of this code already so I’ll try to streamline it… first, again, the pieces that make the model work: TargetModelEvent This is the actual Event that gets sent to your callback: 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 35 36 37 38 39 40 41 package com.zf.events { public class TargetModelEvent { // The ID of the component the event was set on public var contextId:String;   // the model Object the event happened on public var model:Object;   // […]

Read More…
FacebookTwitterGoogle+Share

AS3 BackboneJS-style Model Experiment Pt. 1

Most of my day-to-day work is done using BackboneJS and other JavaScript libs. As a basic experiment, I thought I’d re-create the BackboneJS-style Model in AS3. Why, you might ask? Sure, in AS3, in a lot of cases, it’s going to be infinitely more efficient to have a single public property in class that you change vs. having an actual setter/getter. But hear my case out, and let me know what you think. To start, why a model? With any MVC framework you’ve got a “model” that… models… a set of data for a particular class; a PlayerModel, EnemyModel, etc. EnemyModel may have properties like “currentHP” and “maxHP” to model its current & max hitpoint values. On the PlayerModel, say, you may have a “currentMana” property that holds the current state of how much mana your player currently has. One of the benefits to any model holding your state, is that when you change the value of a property on the model, you can dispatch a Change event. Quick example using (you guessed it…) a TowerDefense game as the context to our tutorial! package { public class PlayerModel { public var mana:Number;   public function PlayerModel(startMana:Number) { mana = startMana; } } } Using this basic Class to hold your mana property, when a timer ticks by saying that the Player has now regenerated X amount of mana, you may have something like: var playerModel:PlayerModel = new PlayerModel(5);   // … other stuff, then in your ‘Tick’ function playerModel.mana = newManaValue; Cool! Super Easy! You’ve got the prototype down, your game is coming along, and now you start adding your UI elements. You’ve got your ArrowTower icon on the screen and it takes 50 mana to build. How do you know when to activate that icon so the player knows […]

Read More…

Starling AS3 Animated Bitmap Builder

So I’ve been pretty deep building onto my Starling TD tutorial code to make an actual TD game, and every once in a while you have to just make something small and fun. I wrote a little Bitmap builder class where you pass in an image, a layer to draw it on, and some params, and the class takes apart your image in pixel “chunks” and redraws those chunks back onto the draw layer. Take a look at the DEMO before checking out the code. Change some settings and click the “Draw” button in the bottom right. You can also download the project folder. I’m going to skip the boring setup part of the code and just jump right into the actual utility. 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 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 package com.zf.utils { import flash.geom.Rectangle;   […]

Read More…

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…