Category: Tutorials

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

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 – 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

Preloader to Game Transition with Stop Propagation

This will be a quick post on some gotcha’s to keep an eye out for when loading your ActionScript 3 game swf from a preloader swf. Nothing revolutionary here, back in mid-December, I had posted a blog on ActionScript 3’s Event Handling and the stopPropagation method and just the other day working on the code for a new game project, I ran into a situation where I should’ve used the method, didn’t, and ran into some issues. Note: If you’re here looking for code on how to write a flash preloader, Lee Brimlow’s video tutorial on Preloading in AS3 gives a beautiful example. When I was originally learning how to code a preloader, that tutorial, and a couple of other tutorials around the net that escape my memory at the moment, were absolutely perfect.

Read More…
Share

AS3 TweenMax-imumLove

So I’ve been working pretty hard on what started as a TowerDefense game for a tutorial here.  It has since become more complex, less tutorialtastic, and awesome.  … sort of.  I’m happy with where it’s going. Now that I’ve stroked my ego, let me stroke a few more. First off I have to say one of the single-most priceless pieces of code ever is TweenMax.  I know I seem to mention them in every blogpost these days.  When I buy programming books, or browse thru Adobe AS3 Live-Docs , I’m reading to solve a problem.  My brains don’t encyclopedia-ize all of the things I come across.  I don’t need to keep them in my memory, that’s why they’re written elsewhere… in APIs and documentation and stuff that I don’t care about.  …Until I need something.

Read More…
Share

Fisheye Menu Using AS3 and TweenLite

A friend of mine that enjoys bitching until I help her with whatever popped into her head that moment messages me tonight.  “Hey for my site [that you’ll make for me for free because i’m a girl and your friend] I want a menu system like that one I showed you [which you’re supposed to magically remember out of all the sites you’ve seen on the whole internet in your life].” After she re-sent me the link, a beautiful site called ilovedust I took a look at the slick little fish-eye style menu and said, “Yeah that’s Animation, I do code.  Not pretty stuff like that.” After 5 minutes of receiving complaining message (but mostly once my game was finished that I was playing at Kongregate, I actually thought about what was happening in that menu, and after about 20 minutes of coding, had a workable menu.  I thought I’d post the code here and make a little tutorial out of it. I love TweenLite.  And TweenMax.  And pretty much everything at GreenSock.  Once you learn the class, it makes everything so easy.  For those that are here who are AS2 coders… a) Upgrade!  and b) They also have AS2 versions of all of their code.  There are a number of other Tween libraries to choose from. Some perform better than others.  But TweenLite was the first for me that ‘made sense’ in my budding AS3 days, which still continue. This is a quick little example of making a 5 menu-item menu that does stuff when you mouse-over.  You could probably think of a million ways to optimize this code; putting the menu items in a loop to initialize and things like that.  I’m just going to lay it out, and you can make your own better.

Read More…
Share