Archive for July, 2014

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…