Category: AS3

AS3 Starling Tower Defense Tutorial – Part 2 – Game States

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

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

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

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

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

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

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

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

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

AS3 Why Your Bitmap Doesn’t Care About Your Input!

Over the past couple of years of doing AS3 coding, it has frustrated me to no end as to why I couldn’t create a new Bitmap object and add Mouse Event Listeners to it.  As I first got into optimizing AS3 display code, trying to shy away from MovieClips everywhere, I started using Sprites more.  As I started learning about the efficiency and pixel-level control of the Bitmap/BitmapData class, I started using those classes more and more.  And every once in a while, I would want to add Mouse Event Listeners to a Bitmap.  Every time during those every once in a while times… it never worked.

Read More…
Share

AS3 – AMFPHP High Score Database

This is a little tutorial covering using ActionScript 3, PHP and AMFPHP to create a MySQL-based High Score Database.  You should have some familiarity with each as this isn’t exactly a “Beginner’s How-To.” For a recent game project I’ve been working on, one of the requirements was a simple High Score Database. After finishing it, I thought I’d post about how I went about coding it. Let’s jump right in with the ActionScript first… So from the game’s .as files, the idea was to display a DataGrid that shows all the scores submitted to the database. I also wanted to create a ScoresDB class that handles all of my database calls and parses the database results, all ready to be added to the DataGrid. So that we’re all on the same page, Main.as will refer to the main class that handles adding the DataGrid to the stage, and handles other game functions. ScoresDB.as will refer to the ScoresDB class that handles the AMFPHP/PHP/MySQL calls. HighScore.php will refer to the AMFPHP Service that actually interacts with the MySQL database and returns result sets.

Read More…
Share

AS3 – AMFPHP – Secure Flash/MySQL Database Calls

I decided to split the original blog post into two separate posts as “Secure” Flash/MySQL DB calls is fairly short, and it was scattered about in a post more on how to set up a High Score DB with AMFPHP. So this will be a couple of very specific tips and things to set up when adding any sort of user-entered data from flash ( or PHP! ) to touch your database. You know the rule… never trust any data. Always make sure you strictly data type variables and typecast user-entered variables. First up, as the user enters data into Flash, via an input TextField, use the .restrict setter to restrict characters entered to only characters that you need.  This is the first layer of protection against SQL injection attacks , and just follows the same sort of common sense “best practices” type of coding as datatyping variables. nameInputTxt.restrict = "A-Z a-z 0-9"; This will restrict the characters allowed in this textField to only alpha-numeric, capitals and lower case. This excludes potential Injection-prone characters like the single apostrophe ” ‘ ” and semi-colon ” ; ” keys. After that data gets entered, we’re going to send those variables thru AMFPHP into our PHP Class.  In the case of our High Scores Database example, we’re sending both the nameInputTxt data, as well as an integer based score value which gets handled by the following PHP code: function addScore( $pName , $pScore ) { $created = date( "Y-m-d H:i:s"); $cleanName = mysql_real_escape_string( $pName ); $cleanScore = intval( $pScore ); return mysql_query( "INSERT INTO $this->table SET `name` = '{$cleanName}' , `score` = $cleanScore , `created` = '{$created}' "); } You’ll see the $cleanName and $cleanScore variables a couple of lines into the function. For String type user-entered data, always run it through PHP’s mysql_real_escape_string() […]

Read More…
Share

FishEyeMenu Class Update… v1.1

Thanks to a comment posted by doggy, I’ve updated the FishEyeMenu class to listen for MouseDown events and keep track of selected items.   New Functions: public function get selected():* public function get lastSelected():*  public function set selected( clickedItemEvent:MouseEvent ):void   New Event Type FishEyeMenu.SELECTED_CHANGED – Triggered upon a change in selected menu item Once you’ve pushed an item into the FishEyeMenu object, it keeps track of it’s own MouseDown events on the items in it’s array.  When a user clicks on a menu item, it sets the _lastSelected property to whatever Was selected, and sets the _currentSelected property to whatever menu item was clicked.   You can now add an event listener for SELECTED_CHANGED which will dispatch upon MouseDown on a menu item. Please note, the getters for selected and lastSelected are going to return the actual Object that you pushed to the menu.  So it will return a reference to the actual TextField or MovieClip or Sprite or whatever you’re using in the menu.  If you check the Example FLA, you’ll see this code as an example // in the main function fishEyeMenu.addEventListener( FishEyeMenu.SELECTED_CHANGED , changedHandler );   //later in the code: /** * Simple test of usage, fishEyeMenu.selected returns the object selected * so it's just like calling the actual object that was clicked last and * you can set whatever properties that object has. * If this were a MovieClip, you could use fishEyeMenu.selected.gotoAndStop() ***/ private function changedHandler( e:* ) { trace( "Selected Item Changed to : " + fishEyeMenu.selected.name ); trace( "Selected Item Changed to : " + fishEyeMenu.lastSelected.name ); fishEyeMenu.selected.x +=20; } In the simple example, calling fishEyeMenu.selected.x += 20; just moves the object you clicked over 20 pixels to the right (+20). But you could also use fishEyeMenu.selected.gotoAndStop( “Selected” ); if you had […]

Read More…
Share