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…
FacebookTwitterGoogle+Share

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…

AS3 Starling Tower Defense Tutorial – Part 1 – External File Loading

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

I’ve finally finished (well… 95%) with my AS3 Starling Game Engine Demo so I can finally start writing tutorials on how you can create a Tower Defense (TD) style game using Starling. Since I have so much info planned, and there’s so much code, and I’m a developer, and I think there’s a vast lack of intermediate/advanced AS3 tutorials on the web, this will probably not be the best tutorial series if you are a beginning coder. None of this stuff is incredibly complex or “expert” or anything, but I’ll probably skip over a lot of the very basics with AS3 in general and Starling in specific. 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/13 added the ZFLoader.as class and commentary since I removed the old posts from my old engine series. If you’re a beginner, I would encourage you to use the resources I myself used to learn both AS3 (over the last 6ish years) and Starling (over the past 2 months): Lee Brimlow’s GotoAndLearn – hands-down one of the best sites that helped me learn AS3 way back. Starling’s Home – has links to tutorials, forums, docs, etc. Starling’s Forums Goals I really want this stressed heavily up front. I am not a designer. My photoshop skills extend about as far as T-Rex arms. I am a developer that loves to dabble in Photoshop. This does not make my dabbles “good.” My lady is the artsy designer type and has not had anything to do with this tutorial series or game demo except to mock my dropshadow/glow SKILLZ! The point […]

Read More…

Starling Demo Almost Ready

Hey guys, As of a few posts ago, I scrapped my by-hand blitting engine and decided to check out Starling. I’m happy to say that my little 2-map, 2-enemytype, 2-towertype demo is almost done. Tonight I was trying to finish up the map select screen, then I need to add JSON data for a second map, and I should have a tutorial up by early next week since I lose a day (thanks 4th of July) due to being social. It will be a full 2 level TD game. It will not be fun. It will not be balanced. But it will show a whole huge range of techniques and skills on how to develop a fully operational deathstar Game! I’ve spent quite a while converting what I had into a Starling TD game engine. I’ll save more of my specific critiques for the individual blogs, but, Starling is kindof an ass sometimes. I mean, it works well when it works well… but TouchEvents can GTFO. I hate that I had to use them. They’re horribly inefficient. I used AS3 Sockets as often as I could instead of Starling (or Flash) events. There’s a ridiculous amount of OOP packed in here with a touch of inheritance and a bit of composition… just enough hierarchy, where useful, to pass a compsci 200’s class. I possess the photoshop skills of a young walrus, so if you are a designer, feel free to scoff, point and laugh, and/or throw burritos in disgust, I have plenty of salsa. I have only the smallest amount of ego invested in the UI. When it comes to using this small little engine to make something bigger, then I’d care about the UI. But for me, photoshop is a time-suck playground. I have a great time in Photoshop, […]

Read More…

Tower Defense Logic Frustration – Wasted Bullets

The Problem One of the biggest frustrations I’ve had while playing Tower Defense games over the years is… wasted bullets. The designers/developers of the game you are playing have meticulously (hopefully?) poured over tower fire/reload delay times, enemy speed/health stat charts scratched out and rewritten out several times in one of three legal pads that they keep around their house, because they never can seem to find the one they wrote in last. Here’s the scenario. After a little proficiency with Game X, You’ve got your towers set up to where they are decimating wave after wave… just chewing through guys. And it happens so fast, you might not catch it. As this is my own particular pet peeve affliction, my stupid brain Watches for it; expects it. Take a wave of small, very-fast-moving enemies. They’re zipping right along the maze you’ve set up and the first few enemies arrive at your expertly configured, tactically sound, death field kill zone…

Read More…

Oh… Starling does that too? And better?

So after spending the past couple of months building a blitting tile & game engine, I was almost finished last night with my Part 4 – Towers code. I had checked out Starling last year and remembered watching Lee Brimlow’s Introducing the Starling Framework video. Now that I had slogged through a lot of the heavy lifting myself in my own ZFEngine, I thought I’d go back through some tutorials and check out the Starling community as it is now. Aaaaaand that was the end of ZFEngine. It was both demoralizing and exciting to see how I could use Starling to do exactly the same things I had done by-hand, except Starling does them cross-platform, and takes advantage of GPU-acceleration. I think I’m going to leave the other tutorials up, but I will be rebooting the series from the beginning using Starling. And the posts might actually be more polished this time

Read More…

AS3 Experiments – MVC in AS3 Tutorial

I’ve been using Backbone.js and jQuery quite extensively for the past year or so and I’ve only recently gotten back into AS3 dev. And I’ve never actually ever used any MVC framework in AS3/Flex, so I wanted to take a quick break away from my AS3 game engine series to have fun and mess around with MVC in AS3. As I didn’t want to stray too far from my game engine, I decided I wanted to whip up some base Model/View/Controller classes, and then extend those to an EnemyModel/EnemyView/EnemyController class. The reason this is in “AS3 Experiments” is because this isn’t just straightforward MVC. I’ve added an expandable Model. Imagine you’re loading in JSON from a file or endpoint and you pass the data straight in to the Model’s constructor or some “setPropertiesFromJSON()” type function. I wanted to play around with the idea of, “what happens if that JSON file has properties inside that you don’t have hardcoded class variables for?” In JavaScript, this wouldn’t even be a conversation. But in AS3, while you do have Dynamic classes, I didn’t want to go that route. So, as we’ll see, if the model doesn’t find the specific class property you’re trying to set, it saves the data anyways in an _attributes Object so you don’t lose it. More on that later. So, I’ve been reading through Rex van der Spuy’s book, AdvancED Game Design with Flash and right from the start, the book just jumps right into MVC… fantastic! I’ve found it’s tough to find “advanced” books and especially “advanced” tutorials online, so this book was very refreshing. There are no sections titled “Data Types in AS3”, or “What is a Function?” I’m really enjoying this book. In the online tutorial front, I came across a couple good sites worth mentioning […]

Read More…

AS3 Mask Example

I was tasked recently with adding a way to scroll clickable buttons inside of a fixed-height UI panel for a new release of StrataLogica. I haven’t dealt much with masking in AS3 so I thought I’d post a quick example of how masking works. The idea is that you’ve got an area for buttons ( content items/whatever ), and that sometimes this area of buttons exceeds the height of the area the content must fit into. So you need some way to scroll these buttons up and down. The biggest, most irritating thing I ran into, and that you may run into when trying to figure out masking is: empty Sprites/MovieClips will always default to a height/width of ZERO. Keep this in mind and we’ll return to it towards the end of the post. Lets look at a visual representation of what we’re trying to accomplish. In the image, the container holding the buttons is 170px high but we only have 100px worth of area where we can display the button list. If we create a 100px high mask and apply it to the button container, it will hide everything that is not inside of those 100px. Then, simply adding some scroll up/down buttons, we can move the button container up or down (the mask does not move once set) and it looks like we’re scrolling our list of buttons. Read on to see the code and example FLA/SWF/ZIP

Read More…

Geolocation Gotcha

I’ve been working on an Air for Android app for the past month or so and I’ve been finding some significant little holes in the current version of the Air/Android SDK. I’ll start with the latest fist-shaking issue I’ve come across. The Geolocation class, only supported on Mobile applications, is a small, straightforward class with a quirk or two up it’s sleeve.  The following code example snippet comes from Adobe’s livedocs for the class (slightly modified): 1 2 3 4 5 6 7 8 9 10 if (Geolocation.isSupported) { geo = new Geolocation(); geo.setRequestedUpdateInterval(100); geo.addEventListener(GeolocationEvent.UPDATE, geolocationUpdateHandler); } else { trace( "No geolocation support." ); } This is a pretty straightforward way to use the Geolocation class. Check to see if Geolocation is supported on the mobile device, if it is, create a new Geolocation instance, set the interval of how long you want it to check the GPS sensors and update your GPS coordinates (every 100ms in this example), and add an event listener/handler function listening for when those coordinates have been updated. The problem here is: What happens when you have a mobile device that HAS gps capabilities, but the user has disabled the GPS for privacy/security reasons? Geolocation.isSupported returns TRUE because the phone does in fact have Geolocation capabilities. But your code will never reach the geolocationUpdateHandler function because the user has disabled GPS Geolocation. You will not receive an error, you will not hear a peep from your app, you will not pass Go and you most certainly will not collect anything near $200. There is one more significant check we need to do that should have been added to Adobe’s example to make it complete. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19   if (Geolocation.isSupported) […]

Read More…

Air, Android, and cookies

What: In using an Android app, I need to send an authentication request (username/password) to the server and the server needs to send me back a cookie.  We all know how you would use JavaScript to grab cookie/session data and then you could send it right into flash. Problem: How or where would you find cookie being sent to you in your Air/Android app that uses no browser? Solution:  Headers can be found in the HTTPStatusEvent object!  Hurray!  It took me way too long to find the answer to this issue.  Everyone on google is happy to tell you “Hey there’s a manageCookies setting on the URLRequest object!”  Great, how do you find the damn headers?  In fact, as you’ll see in the following code, you dont even need to mess with that manageCookies setting.  I set it to true and got headers.  I set it to false and god headers.  I didn’t include it at all and got headers.  Sweet.

Read More…

Image GPS Extractor Android App

I just wrapped up my first little Android App using Adobe AIR.  As far as development goes, that was one of the smoothest experiences I’ve ever had. I’m currently developing a mobile app for a project at work.  I’ve never created a mobile app before, and the project app is going to take a few weeks of solid work to complete.  I wanted to see the whole process from dev to release of a mobile app much sooner…. like, now.  So Friday I started writing classes and code that I’m going to need for the project at work, and that I could pull out of the project and use in a small tutorial project that I’m posting here.

Read More…