Workshop: Utopian Mining – Critique
Today, Matt Porter takes a look at a recently released mining game, currently doing very well on Newgrounds: Utopian Mining, developed by Schulles.
Play the Game
Click to play on Newgrounds
Overview
Utopian Mining is one of the most polished RPG digging games I’ve played on the web in some time. It does so much right that it stings horribly when you do come across its few faults. My expectations were set high after seeing the excellent scores on Newgrounds and playing for a few moments, but I quickly learned that the game wasn’t all my hopes had wanted it to be.
My high expectations aside, there’s a lot to be learned from this wonderful little (emphasis on little) game.
Gameplay
The object is simple. You’re a tiny mining robot hanging out in a town that was recently destroyed by a horrible storm, and you need to collect materials while digging to get the town up and running again. There’s been a decent number of games in this genre over the years, and they’ve always done quite well in the eyes of players; quite well for sponsors too seeing as they continue to get sponsored by large sites such as Newgrounds and Kongregate. There’s definitely some concrete evidence as to why they do so well, which I’ll go over shortly.
Utopian Mining doesn’t really mix things up too much from your standard RPG digger, but it does add a few (extremely linear) quests, as well as a bit of story. Quests generally consist of giving someone money or a certain material, all of which is laid out in the exact order you would achieve if said quests didn’t exist, making the quests more of an illusion than anything.
The game appears to be a lot more content filled at first, especially when new buildings rise as you complete quests, and you learn of a beach far to the east, but it quickly becomes apparent that these changes hardly affect gameplay and are mostly visual fluff. Buildings give a small discount in restoring power to your robot, and the beach is used to get sand for a quest just once (yes, once). This visual fluff is of course a welcome addition, especially in the eyes of sponsors, but I fear that these quests will quickly feel shallow to the average player, leaving them with a desire for just a bit more depth. I would have loved to see quests be less linear, and to have them alter how the game is actually played. Unlocking new upgrades in the shop would have been great incentive to complete a difficult, and not immediately rewarding quest. In addition to these faults, the player also isn’t alerted when a quest is complete, which seems like a no-brainer for an otherwise very polished game.
The beach
The largest flaw of the game is that it’s so simple it becomes ridiculously easy to complete. It’s so unbalanced, that if it wasn’t short, slightly addicting, and quite charming, it would likely fail to be a decent game. Many players, such as myself, often skip cheap upgrades, and save up for the next reasonable purchase. This may take an extra five or ten minutes to do early on in the game, but it generally pays off. The same is true for buying equipment in games such as Final Fantasy, or really any game that offers an upgrade system of some sort.
The problem with Utopian Mining, is that it doesn’t only pay off – it actually destroys whatever challenge may have ever existed. I beat the entire game within an hour, and wasn’t remotely challenged beyond the first five minutes; in fact, my robot never even died. Generally speaking, the challenge of a game should increase as you go on, but Utopian Mining simply gets easy, whether you skip upgrades or not. Schulles (the developer) simply didn’t pay enough attention to the balance of the game, and it unfortunately reared it’s ugly head for me, and from the looks of other reviews, many other players.
Close to death, but never in any real danger.While casual gaming is fun, it’s important to challenge players, or at least make them feel like they completed something difficult, even if “difficult” simply translates to time consumption (a common tactic of MMORPGs). While I don’t want to write out a game design document in this review, a simple addition to make the game more challenging would have been more hazards, such as lava pits. As it is, going deeper and running out of energy are the only things that can kill you, and that obviously doesn’t really work.
One of the more minor flaws, in my opinion, is the rather clunky user interface. For an example, let’s look at the shop screen:
To navigate the shop, you must press 1-4 to switch between categories (chassis, drill, batter, cooling liquid), use the arrow keys to go up and down, X to select, and C to exit. I love retro games, and I’m all about ditching the mouse when it really isn’t needed, but this wasn’t one of those times. There’s no reason to neglect the mouse for a simple shopping interface, especially when it would be faster and less frustrating to use for the player, and could work alongside keyboard controls as well. There’s no reason to annoy your players because you feel like being truly retro; give players an option, and both casual and hardcore players will be happy.
While Utopian Mining has its flaws, as almost all games do, it does a lot right. It takes everything you’d expect from an RPG digging game, strips it down, and polishes what little it has to an extreme. It’s basic, but it’s addicting, and for any game developer, that’s a good thing. Getting players to return to your game is not only great for increasing views, but it also helps developers gain more recognition, and both sponsors and developers will earn a decent bit more revenue, assuming the developer put ads such as Mochi or CPMstar in their game.
The unfortunate side to this, for Utopian Mining, is that the game isn’t quite long enough to ensure a returning play from most players, as it’s generally beaten in the first sitting. As far as the core mechanics go, they’re addicting. The game lacks any sort of real depth (aside from the digging bit [that was a terrible pun - Ed.]), but that aside, players seem to get addicted, and want more. The core mechanics of the game are undeniably an extremely strong point, and seeing them presented in such a polished manner has appeared to be an easy win for game developers.
Graphics
I’ve said it before, and I’ll say it again: I absolutely love retro and retro-inspired games. Utopian Mining offers some very nice looking retro graphics, which instantly earn my approval. The world is charming on the surface, and while a bit bland below, it’s done well enough to please the eyes. The animations are extremely simple, but they get the job done, and there’s no need for more.
As far as details go, the game doesn’t skimp out, and there’s actually a decent attention to detail. The ground gets darker as you go deeper, digging has a cool particle effect of dirt flying out, and warnings appear in a simple, but cool fashion across the screen. Overall, the graphics are top-notch for a retro-inspired style, and I wouldn’t change them a bit.
Audio
The audio is also extremely well done in Utopian Mining, and has very little room for improvement. The music on the surface is excellent and charming, which sets an immediately positive mood for players. Upon digging and going below the surface, the music instantly changes with a nice fading touch, which is a great addition.
Sound effects are nicely done, even if a bit simple. I would have appreciated some variation when collecting different materials, but that’s a minor piece of polish the develop chose not to include. All in all, the sounds are quite fitting, retro, and very well done.
Conclusion
Utopian Mining is undeniably a great game, it’s just a great game that has been done before. What I appreciate most about it, is that it takes the core mechanics, leaves behind the extras, and makes the game shine nonetheless. It’s an excellent game for developers to study, as there’s very little to it, yet it’s quite successful. I know my interest has been piqued by it, and I plan to explore development in the genre myself. All in all, Utopian Mining is a charming and simple game that can pass some time for the casual gamer, teach some important lessons to game developers looking for them, or both.
Your Turn
What do you think of Utopian Mining?
View full post on Activetuts+
Today, Matt Porter takes a look at a recently released mining game, currently doing very well on Newgrounds: Utopian Mining, developed by Schulles.
Play the Game
Click to play on Newgrounds
Overview
Utopian Mining is one of the most polished RPG digging games I’ve played on the web in some time. It does so much right that it stings horribly when you do come across its few faults. My expectations were set high after seeing the excellent scores on Newgrounds and playing for a few moments, but I quickly learned that the game wasn’t all my hopes had wanted it to be.
My high expectations aside, there’s a lot to be learned from this wonderful little (emphasis on little) game.
Gameplay
The object is simple. You’re a tiny mining robot hanging out in a town that was recently destroyed by a horrible storm, and you need to collect materials while digging to get the town up and running again. There’s been a decent number of games in this genre over the years, and they’ve always done quite well in the eyes of players; quite well for sponsors too seeing as they continue to get sponsored by large sites such as Newgrounds and Kongregate. There’s definitely some concrete evidence as to why they do so well, which I’ll go over shortly.
Utopian Mining doesn’t really mix things up too much from your standard RPG digger, but it does add a few (extremely linear) quests, as well as a bit of story. Quests generally consist of giving someone money or a certain material, all of which is laid out in the exact order you would achieve if said quests didn’t exist, making the quests more of an illusion than anything.
The game appears to be a lot more content filled at first, especially when new buildings rise as you complete quests, and you learn of a beach far to the east, but it quickly becomes apparent that these changes hardly affect gameplay and are mostly visual fluff. Buildings give a small discount in restoring power to your robot, and the beach is used to get sand for a quest just once (yes, once). This visual fluff is of course a welcome addition, especially in the eyes of sponsors, but I fear that these quests will quickly feel shallow to the average player, leaving them with a desire for just a bit more depth. I would have loved to see quests be less linear, and to have them alter how the game is actually played. Unlocking new upgrades in the shop would have been great incentive to complete a difficult, and not immediately rewarding quest. In addition to these faults, the player also isn’t alerted when a quest is complete, which seems like a no-brainer for an otherwise very polished game.
The beach
The largest flaw of the game is that it’s so simple it becomes ridiculously easy to complete. It’s so unbalanced, that if it wasn’t short, slightly addicting, and quite charming, it would likely fail to be a decent game. Many players, such as myself, often skip cheap upgrades, and save up for the next reasonable purchase. This may take an extra five or ten minutes to do early on in the game, but it generally pays off. The same is true for buying equipment in games such as Final Fantasy, or really any game that offers an upgrade system of some sort.
The problem with Utopian Mining, is that it doesn’t only pay off – it actually destroys whatever challenge may have ever existed. I beat the entire game within an hour, and wasn’t remotely challenged beyond the first five minutes; in fact, my robot never even died. Generally speaking, the challenge of a game should increase as you go on, but Utopian Mining simply gets easy, whether you skip upgrades or not. Schulles (the developer) simply didn’t pay enough attention to the balance of the game, and it unfortunately reared it’s ugly head for me, and from the looks of other reviews, many other players.
While casual gaming is fun, it’s important to challenge players, or at least make them feel like they completed something difficult, even if “difficult” simply translates to time consumption (a common tactic of MMORPGs). While I don’t want to write out a game design document in this review, a simple addition to make the game more challenging would have been more hazards, such as lava pits. As it is, going deeper and running out of energy are the only things that can kill you, and that obviously doesn’t really work.
One of the more minor flaws, in my opinion, is the rather clunky user interface. For an example, let’s look at the shop screen:
To navigate the shop, you must press 1-4 to switch between categories (chassis, drill, batter, cooling liquid), use the arrow keys to go up and down, X to select, and C to exit. I love retro games, and I’m all about ditching the mouse when it really isn’t needed, but this wasn’t one of those times. There’s no reason to neglect the mouse for a simple shopping interface, especially when it would be faster and less frustrating to use for the player, and could work alongside keyboard controls as well. There’s no reason to annoy your players because you feel like being truly retro; give players an option, and both casual and hardcore players will be happy.
While Utopian Mining has its flaws, as almost all games do, it does a lot right. It takes everything you’d expect from an RPG digging game, strips it down, and polishes what little it has to an extreme. It’s basic, but it’s addicting, and for any game developer, that’s a good thing. Getting players to return to your game is not only great for increasing views, but it also helps developers gain more recognition, and both sponsors and developers will earn a decent bit more revenue, assuming the developer put ads such as Mochi or CPMstar in their game.
The unfortunate side to this, for Utopian Mining, is that the game isn’t quite long enough to ensure a returning play from most players, as it’s generally beaten in the first sitting. As far as the core mechanics go, they’re addicting. The game lacks any sort of real depth (aside from the digging bit [that was a terrible pun - Ed.]), but that aside, players seem to get addicted, and want more. The core mechanics of the game are undeniably an extremely strong point, and seeing them presented in such a polished manner has appeared to be an easy win for game developers.
Graphics
I’ve said it before, and I’ll say it again: I absolutely love retro and retro-inspired games. Utopian Mining offers some very nice looking retro graphics, which instantly earn my approval. The world is charming on the surface, and while a bit bland below, it’s done well enough to please the eyes. The animations are extremely simple, but they get the job done, and there’s no need for more.
As far as details go, the game doesn’t skimp out, and there’s actually a decent attention to detail. The ground gets darker as you go deeper, digging has a cool particle effect of dirt flying out, and warnings appear in a simple, but cool fashion across the screen. Overall, the graphics are top-notch for a retro-inspired style, and I wouldn’t change them a bit.
Audio
The audio is also extremely well done in Utopian Mining, and has very little room for improvement. The music on the surface is excellent and charming, which sets an immediately positive mood for players. Upon digging and going below the surface, the music instantly changes with a nice fading touch, which is a great addition.
Sound effects are nicely done, even if a bit simple. I would have appreciated some variation when collecting different materials, but that’s a minor piece of polish the develop chose not to include. All in all, the sounds are quite fitting, retro, and very well done.
Conclusion
Utopian Mining is undeniably a great game, it’s just a great game that has been done before. What I appreciate most about it, is that it takes the core mechanics, leaves behind the extras, and makes the game shine nonetheless. It’s an excellent game for developers to study, as there’s very little to it, yet it’s quite successful. I know my interest has been piqued by it, and I plan to explore development in the genre myself. All in all, Utopian Mining is a charming and simple game that can pass some time for the casual gamer, teach some important lessons to game developers looking for them, or both.
Your Turn
What do you think of Utopian Mining?
In this short tutorial I will introduce you to ASAudio, and AS3 library that greatly reduces the amount of code needed to create and manipulate sound object in your ActionScript projects.
Step 1: Examining ASAudio
ASAudio is an ActionScript 3 library that greatly reduces the amount of code needed to create and manipulate (volume changes, pan) audio files’ within your ActionScript Projects. Traditionally you would need to do the following to load in, play, and change the volume of a Sound within ActionScript:
var urlRequest:URLRequest = new URLRequest("path/to/track.mp3"); var sound:Sound = new Sound(urlRequest); var soundChannel:SoundChannel = sound.play(); var soundTrans:SoundTransform = soundChannel.soundTransform; soundTrans.volume = .5; soundChannel.soundTransform = soundTrans;With ASAudio all you need to do is the following
var track:Track = new Track("path/to/track.mp3"); track.start(); track.volume = .5;Step 2: Getting the Library
Head over to the project’s Google Code page and download the latest version of ASAudio.
Once you have downloaded it, extract it and copy the the “com” folder that is inside the “src” folder to the folder where you will be creating your ActionScript project.
Step 3: New ActionScript Project
Start a new ActionScript project, and save it in your project folder as “asAudio.fla”. Under the “PROPERTIES” panel, set the stage color to white and give it a width and height of 500x150px.
Now create a new ActionScript File and save this as “Main.as”. Set this as your Document Class.
Step 5: Imports and Constructor Function
Add the following to the “Main.as” you created in the step above.
package { import flash.display.Sprite; import com.neriksworkshop.lib.ASaudio.*; import flash.media.Sound; import flash.events.MouseEvent; import flash.events.Event; public class Main extends Sprite { public function Main() { trace("Working"); } } }Here we import the classes we will need throughout this tutorial, and setup our
Main()constructor.Step 6: Track
The
Trackis the fundamental class of ASAudio. Everything you do with the library depends on theTrack. In this step we will create a newTrack, and play it. Enter the following code above theMain()within “Main.as”.var track:Track = new Track("BoozeandBlues.mp3");And the following within the
Main()constructor.public function Main() { track.start(); }To create a
Trackyou pass in a path to the mp3. We then call thestart()method of theTrackwithinMain().If you test now you should hear the mp3 play.
Step 7: Setting up the Interface
In this step we will setup the interface for the project so we can control our
Track‘s.From the Component Window drag 4 buttons and a slider onto the Stage. You can get to the Components Window by choosing Window > Components or by pressing CTRL+F7.
Give the buttons the following properties, one by one.
Here is a screenshot of the first Button’s setup.
Give the slider the following properties.
Here we set some initial values for the slider. I won’t go over them as you can refer to my Quick Tip that covers the sliders functionality.
Step 8: Controlling the Track
In this step we will code the start, stop, and volume functionality for the track we created in the previous step. Add the following to “Main.as”.
public function Main() { addListeners(); } private function addListeners():void{ trackSlider.enabled = false; playTrackBtn.addEventListener(MouseEvent.CLICK,playTrack); stopTrackBtn.addEventListener(MouseEvent.CLICK,stopTrack); trackSlider.addEventListener(Event.CHANGE,adjustTrackVolume); }Here we call the
addListeners()function within ourMain()constructor. InsideaddListenerswe set the disable thetrackSliderand add Listeners to 3 of our buttons.Step 9:
playTrack()The
playTrack()function will tell the track to start playing. Add the following beneath theaddListeners()function you created in the step above.private function playTrack(e:MouseEvent):void{ trackSlider.enabled = true; track.start(); track.volume = 1.0; }Here we enable the
trackSliderplay theTrackusing thestart()method and set the volume of the track using the volume property.Step 10:
stopTrack()The
stopTrack()function will be used to stop theTrack. Add the following beneath theplayTrack()function you added in the step above.private function stopTrack(e:MouseEvent):void{ track.stop(); }Here we simply call the
stop()method on theTrack.Step 11:
adjustTrackVolume()The
adjustTrackVolume()function will be used to adjust the volume of theTrack. Add the following beneath thestopTrack()function you created in the step above.private function adjustTrackVolume(e:Event):void{ track.volume = e.target.value; }Here we set the volume of the track equal the the sliders
valueproperty. Because we set the maximum to 1 and the minimum to 0.1 it will always be a number between 0.1 and 1.0 incremented by 10ths. i.e 0.1, 0.4, and so on.If you test the movie now you should be able to play, stop, and adjust the volume of the
Track.Step 12: Groups
You may have been wondering what the “Play Group” button was for? Well, along with offering basic the basic
TrackASAudio has a notion of “Groups” which allows you to stack sounds together and play them together all at once. Add the following within theaddListeners()function you created in the step above.private function addListeners():void{ trackSlider.enabled = false; playTrackBtn.addEventListener(MouseEvent.CLICK,playTrack); stopTrackBtn.addEventListener(MouseEvent.CLICK,stopTrack); trackSlider.addEventListener(Event.CHANGE,adjustTrackVolume); playGroupBtn.addEventListener(MouseEvent.CLICK,playGroup); }Here we add a Listener to our
playGroupBtnthat will call theplayGroup()function. We will code this next.Step 13:
playGroup()Add the following beneath the
adjustTrackVolume()function you creafted in the step above.private function playGroup(e:Event):void{ var group:Group = new Group( [new Track("piano.mp3"), new Track("drumbeat.mp3")] ); group.start(); }Here we create a new
Groupby passing in an Array of tracks. We then call thestart()method which tells theGroupto start playing.If you test now you should hear the “piano.mp3″ and “drumbeat.mp3″ playing simutaneously.
Step 14: Playlist
Along with offering the
Group, ASAudio has a notion of aPlayList. ThePlayListis like a playlist on an MP3 player. You “queue” up songs and when one finishes it continues to the next. Add the following within theaddListenersfunction.private function playPlayList(e:Event):void{ var playList:Playlist = new Playlist( [new Track("piano.mp3"), new Track("drumbeat.mp3")] ); playList.loop = false; playList.start(); }Like the
Groupwe create a newPlayListby passing in an Array of Tracks. We set thePlayListto not loop and call thestart()method.You can now test and see the
PlayListin action.Conclusion
You have learned about ASAudio and seen how it can greatly reduce the amount of code needed to create Audio within your ActionScript Projects. This library has more to offer including fade, pause, and mute methods… I suggest you take a look through the documentation to see what all is available. I hope you found this useful and thanks for reading!
Each month, we bring together a selection of the best tutorials and articles from across the whole Tuts+ network. Whether you’d like to read the top posts from your favourite site, or would like to start learning something completely new, this is the best place to start!
We’ve Been in Kuala Lumpur!
This month we’ve been attending an Envato company meet-up in Malaysia. We’ve had a fun time working together as a team, made lots of exciting plans for the future of Tuts+, and also had the chance to meet up with lots of our readers! Thanks to everyone who took the time to attend our community meet-up and, if you’re interested, you can find out a bit more about our trip here (and see a few photos!)
Above: A happy bunch. Clockwise from left: Michael James Williams (Activetuts+ editor), Japh Thomson (Wptuts+ Editor), Ian Yates (Webdesigntuts+ editor), and David Appleyard (Tuts+ Manager).
Psdtuts+ — Photoshop Tutorials
Use Photoshop CS6 to Create a Micro Machines Inspired Scene
Photoshop CS6 is packed with new features and effects that you can use in your work. In this tutorial we will utilize Photoshop’s new 3D capabilities as well as its new content aware features to create a Micro Machines inspired composition. Let’s get started!
Visit Article
Create a Snowy Landscape From Desert Photography in Photoshop – Tuts+ Premium Tutorial
Photoshop is a great tool because it allows us to be creative and produce imagery that would be impossible to create otherwise. In this Tuts+ Premium tutorial, author Tony Aubé will create a snowy landscape from desert photography and photos of sand. This tutorial is available exclusively to Tuts+ Premium Members. If you are looking to take your photo manipulation skills to the next level then Log in or Join Now to get started!
Visit Article
Create a Light Bulb Inspired Text Effect in Photoshop
Layer styles are a powerful and time saving feature that can help you apply amazing effects to your designs. In this tutorial we will use layer styles to create a light bulb inspired text effect in Photoshop. Let’s get started!
Visit Article
Nettuts+ — Web Development Tutorials
Meet Grunt: The Build Tool for JavaScript
If you’re working on a large project, you’ll no doubt have a build script or a bunch of task scripts to help with some of the repetitive parts of the process. You might use Ant or Rake, depending on the language the project is written in.
Visit Article
CSS Refreshers: Borders
Sure, we’re all familiar with borders. Is there anything new that could possibly be introduced? Well, I bet there’s quite a few things in this article that you never knew about!
Visit Article
Lightning Fast Folder and File Creation in Sublime Text 2
I’m frequently asked about how I’m able to create new directory structures and files so quickly in Sublime Text 2. Well the answer is that this functionality is not offered natively; instead, I use a helpful plugin. I’ll demonstrate it in this video.
Visit Article
Vectortuts+ — Illustrator Tutorials
Quick Tip: The Line of Action, Make Your Character Poses More Dynamic!
The line of action is a key ingredient to making your character’s poses look more dynamic. In this guide, we will explore what the line of action is and how it can be used to make your character poses come alive.
Visit Article
Free Vector Grunge Graphics for Designers and Illustrators
If you’re looking for free vector grunge graphics, such as distressed backgrounds, worn textures, dirty paint splatter, and more, then you’ve found a compilation worth downloading. We’ve collected an assortment of vector grunge illustrations, free vector grunge textures, and wickedly worn graphics available for free download. Jump in and grab these free grunge vectors now and start making grunge vector art for your next project.
Visit Article
Vintage Vector Design Workflow: Creating a Retro Flyer Design
This tutorial will cover the process of creating a vintage inspired retro flyer design. There are four main areas of concentration to achieve this look and feel: color, type, character and texture. We’ll review a complete vintage vector design workflow to create this retro flyer design. Let’s get started.
Visit Article
Webdesigntuts+ — Web Design Tutorials
Quick Tip: Speed Up Your Workflow With Photoshop Actions
Avoiding repetitive tasks is always going to speed up your workflow. In today’s Quick Tip we’ll do just that, by utilizing Photoshop’s actions panel and combining it with hotkeys. Watch this quick screencast and I guarantee you’ll save tons of time next time you’re designing!
Visit Article
Building a Responsive Layout With Skeleton: Finishing Off
During previous screencasts in this series we’ve covered a lot of ground, building our responsive (or adaptive) layout with the Skeleton boilerplate. It’s now time to finish all the final details; arguably the most time-consuming part of any website build!
Visit Article
Adobe Photoshop CS6: Improvements for Web and UI Designers
Photoshop CS6 has been hailed as a huge improvement for web and UI designers. Im going to share with you some of the features that Photoshop CS6 Beta has to offer and demonstrate how they can help you in your web or UI design workflow.
Visit Article
Phototuts+ — Photography Tutorials
A How-To Guide to Getting Started in Real Estate Photography
Real estate is one of the world’s most competitive industries. Dominated by ambitious agents looking for the next big sale, selling real estate is all about setting yourself apart from the competition. What better way to catch a buyer’s eye than the perfect photo of the perfect home? In today’s article, we’re taking a look at the exciting world of real estate photography.
Visit Article
A Simple Solution to White Balance and Exposure: The 18% Gray Card
An 18% gray card is a handy accessory that every serious photographer should keep in their bag. It doesn’t cost much and it barely takes up any space. If you encounter a situation where you have mixed lights, this unassuming piece of plastic helps you determine the white balance. It can also be used to determine the correct exposure.
Visit Article
An Expert Guide to Matting and Framing a Photo
The final printed image is the culmination of my journey in creating a piece of artwork that represents my view of the world around me. As photographers in the digital age we spend far too much time staring at our photographs on our computer screens and very little time holding them in our hands. I still take great pride in every print I produce. There are a myriad of options for printing your work today, from canvas wraps to Metal prints, however for me there is something timeless and classic about a finely Matted and Framed print.
Visit Article
Cgtuts+ — Computer Graphics Tutorials
Rigging A Voodoo Doll Character In Maya Using Setup Machine & Face Machine
In this tutorial you’ll learn how to create a complete character rig for a voodoo doll character in Maya using the Setup Machine and Face Machine plugins from Anzovin studios. You’ll learn how these plugins can save you valuable time during rigging by allowing you to utilize pre-built body and face rigs which can then be customized to fit you and your character’s specific needs.
Visit Article
Creating A Stylish 3D Countdown Animation In Cinema 4D
In this tutorial we’re going to create a smooth, stylish countdown animation. You can use words, letters, logos or whatever you want to make this type of animation. As you can see it’s easy to set up and looks very stylish and attractive.
Visit Article
Create a 3D Micro Robotic Insect in ZBrush
This week, Cgtuts+ has teamed up with our sister site Psdtuts+ to bring you this amazing two part, in-depth tutorial from Nacho Riesco. In this tutorial we are going to sculpt a Micro Bionic Insect with chemical war purposes using simple hard-surface modelling techniques with the Clipping Brush, Masking and much more. Head over to Psdtuts+ for the conclusion of this project where we’ll composite our render passes from Zbrush, and create the final image in Photoshop!
Visit Article
Aetuts+ — After Effects Tutorials
Make Your Own Durable Light Dimmers For Less Than $30
In today’s tutorial we’re going to take you step by step through everything you need to know to build your own rugged light dimmers. We use these exact dimmers on all our studio and on location shoots. Besides being extremely durable, these little devices provide a wider range of lighting options and are surprisingly valuable when you have to light a scene in a tight location.
Visit Article
Is Working On Stills Easier in After Effects or Photoshop?
We always tend to go to Photoshop for working with still images, but today I’d like to bring up a few thoughts about why working in After Effects might be a better solution for your next project.
Visit Article
Show A Motion Path With The StroMotion Effect
In this tutorial we will track freeze frames into a hand-held scene utilizing The Foundry’s CameraTracker to achieve an effect that is often referred to as “StroMotion”. We’ll be talking about different methods of how to remove the subject from the background and how to line everything up. Enjoy!
Visit Article
Audiotuts+ — Audio & Production Tutorials
Sites That Serve Up Great Loops and Samples
Loops can form the foundation of a track, and are useful for quickly putting some ideas together when sketching out an arrangement. Samples provide us with sounds and colors to create our music with. But where can you download great loops and samples? Here are 30+ great places to start.
Every music producer worth his salt is in the process of building up a useful collection of useable sounds.
Visit Article
Morphing in Pro Tools
We’ve all seen how you can morph one face into another in the graphical world. In this screencast Rishabh Rajan shows us how to achieve the same thing with audio using Pro Tools.
Visit Article
D Mixing Part 7: Mastering, The Final Chapter (Part 1)
Although this is a series on mixing, it feels incomplete not to get into at least a brief discussion on master bus options and to discuss what exactly goes on when you print all your hard work to a single and final stereo file. Due to the depth of this topic, I am splitting it into two parts.
Visit Article
Activetuts+ — Flash, Flex & ActionScript Tutorials
What Is Dart, and Why Should You Care?
In this tutorial, I’ll introduce you to Google’s new web programming language, Dart, and explain why you should like it and what you need to know about it. Learn about this new language and form some opinions about it – will it really replace JavaScript?
Visit Article
Accessing the Same Saved Data With Separate Flash and JavaScript Apps
In this tutorial I will show you how to access the same saved data in separate Flash and JavaScript apps, by storing it in HTML5 LocalStorage and using ExternalInterface to reach it with AS3. We will create the same app in both JavaScript and Flash to demonstrate that it is platform agnostic.
Visit Article
An ImpactJS Overview: Introduction
Impact is an incredibly powerful HTML5 game framework which takes advantage of modern browser’s canvas element and can also run on mobile or be compile into a native iOS app. In this video I will go over the framework, how to set up a project, some background into how to create classes in it and finally go over the core classes that make up the framework. This is a high level overview which will give you a general sense for how things work.
Visit Article
Wptuts+ — WordPress Tutorials
Mini Guide to Contact Form 7
Usually a website needs a contact form to communicate with the site owner. One of our favorites is Contact Form 7. Let’s see what it can do!
Visit Article
Custom Post Type Helper Class
For a lot of WordPress projects these days we use custom post types. The WordPress development team created some handy methods to integrate them into your projects. But when you use custom post types, taxonomies and meta boxes frequently, it’s quite probable that you’re going to repeat yourself. That’s why we are going to use the power of these WordPress functions to build a more powerful class, which we can use to quickly register post types, taxonomies and meta boxes.
Visit Article
Using WordPress as an Intranet
When we talk about WordPress we usually associate it with either being a blogging platform or just another content management system, but what about as an Intranet? This tutorial will show you how you can turn your basic installation of WordPress into a robust Intranet for your business.
Visit Article
Mobiletuts+ — Mobile Development Tutorials
Create an Awesome Carousel, Version 2.0
Engage your users with stunning carousels! We’ll look at how easy and clean it can be to implement scrollable, interactive carousels in your iOS applications. With high configurability, you can have 3D, flat, rotating, and endless scrolling arrays for data, images, and buttons.
Visit Article
Corona SDK: Create an Alphabet Soup Game
In this tutorial series, you will learn how to create a minimalistic Alphabet Soup game. The goal of this game is to allow the player to pick words out from a jumbled set of letters. Read on!
Visit Article
iOS Quick Tip: Interacting with Web Services
At some point in your iOS development career, you will have the need to interact with a web service from within your app. You may need to access remote data, parse a social network feed, or even download some assets into your application. This quick tip will teach you to do so without using third party libraries!
Visit Article
In this video I will discus some tips and tricks for optimizing your Impact games and how to get the best performance possible across desktop to mobile. I will cover ways to reduce draw calls, how to set up setting properties for your levels and other important things I have learned through trial and error while building games with Impact.
Watch the Screencast
You can also download the video to watch later.
More Info and Links
To learn more about Impact visit http://ImpactJS.com and check out a copy of my book on Impact called Introducing HTML5 Game Development, published by O’Reilly.
Sublime Text 2 is a powerful text editor, popular due to its cross-platform availability and its knack for leveraging pre-existing TextMate capabilities. Combine Sublime Text 2 with Google’s new Dart language, and power coders can be very happy.
Prerequisites
In order for this to go quickly, I’ll assume that you have some foundational knowledge. You should be familiar with the following for this tip:
.bash_profilefile via the Terminal, then you’ll be fine.If you need some prior reading material, I refer you to the following:
Step 1: Install Dart Editor
We won’t really be using the Dart Editor (the point of this tutorial is to use Sublime Text for Dart development, after al), but the download includes the Dart SDK, which is really what we’re after. Even if you’re a hardcore Sublime Text 2 fanatic, it’s still not a terrible idea to have the “official” Dart Editor installed and handy.
On the official Dart site, you can download the Dart Editor from the following link:
http://www.dartlang.org/docs/getting-started/editor/
Under “Step 1″ of that page, you’ll find a link to a ZIP file containing the Dart Editors. It’s around 70-100 MB, depending on your OS, so it’s not a terribly heavy download. But get it started!
The Dart Editor is based on Eclipse, so if you’ve used that you’ll be right at home with the Dart Editor. I won’t be getting into details on using it in this tutorial, but feel free to play around with it. The Activetuts+ introductory Dart tutorial (currently exclusively available through Facebook) takes you through the basic usage of the Dart Editor.
Note that if you don’t want to install the Dart Editor, you can download just the Dark SDK for your OS at this URL (it’s only 2 or 3 MB):
http://www.dartlang.org/docs/getting-started/sdk/index.html
Step 2: If You Have 64-Bit Linux
If you don’t have a 64-bit Linux installation, you can skip this step. (Yep, that includes you, Windows and Mac users; scroll down for your instructions.)
If you are on a 64-bit Linux installation, you’ll need to install a 32-bit library in order to run the Dart compiler, even if you’ve downloaded the 64-bit Dart Editor. I’m not a Linux guru by any stretch, but this worked for me, on my Ubuntu 11 installation.
Go to the Software Center and search for “lib32stdc++6″ or “GNU Standard C++ Library 32 bit”. Install it. You can continue on with the next few steps while it installs – just be sure this library has successfully installed before attempting to run the build system.
Step 3: Download Google’s Dart TextMate Language File
The TextMate language file is hosted on Google Code here (web-based view into the repository):
http://code.google.com/p/dart/source/browse/branches/bleeding_edge/dart/tools/utils/textmate/Dart.tmbundle/Syntaxes/Dart.tmLanguage
This is actually part of a larger TextMate bundle (but not that much larger), but we’re only interested in the language grammar.
Before we grab that file, create a location for it to live on your system. You’ll need to create a folder named
Dartin the following location, depending on your OS:~/Library/Application Support/Sublime Text 2/Packages/DartC:\Users\Administrator\AppData\Roaming\Sublime Text 2\Packages\Dart~/.config/sublime-text-2/Packages/DartThen open up your command line interface and navigate to inside of that newly-created
Dartfolder.Subversion doesn’t make it easy to checkout a single file, but we can export a single file. Enter this command:
After a moment you should have the
Dart.tmLanguagefile in your Dart folder.Go ahead and try it out (you may need to restart Sublime Text). Open up a Dart file and check out the colorful syntax:
A simple Dart file in Sublime Text 2, showing off syntax highlighting
Step 4: Locate your
frogcExecutablefrogcis the Dart-to-JavaScript compiler. It’s a command line tool, but it’s thankfully easy to use. We’ll be using it in a Sublime Build System later to turn our Dart file(s) into JavaScript, so we don’t even need to use it on the command line anyway.To make the Build System, we need the path to our
frogcexecutable. This was downloaded with the Dart SDK (which you either downloaded with the Dart Editor or by itself). It will be located atdart-sdk/bin/frogc. “dart-sdk” will either be where you downloaded and unzipped the SDK by itself, or nested just inside thedartfolder which also contains the Dart Editor application, which will be where you placed it.We need a command-line-compatible path to frogc. On Mac OS, you can do this:
For Windows:
If you’re on Linux, you probably already know how to do this.
Make sure the path is absolute, and readily available. Place it on your clipboard or in a scratch text file for the next step.
Step 5: Create a Dart Build System to Compile JavaScript
To make this language package really useful, we should set up a Build System, which lets us run files through a shell build command.
In Sublime Text, choose the Tools > Build System > New Build System… menu. You’ll be presented with a new file with the following default contents:
{ "cmd": ["make"] }This is just a JSON object that describes a very basic build command. We’ll add much more to this to make it useful for Dart development.
With that path you determined in the last step readily available, we can edit our
sublime-buildfile.If you’re on Mac or Linux, change the contents of the file to:
{ "cmd": ["/Applications/dart/dart-sdk/bin/frogc", "$file"], "file_regex": "^(.+\\.dart):(\\d+):(\\d+):.+\\[0m(.+)$", "selector": "source.dart" }The above is what I have on my Mac system. Where it says
/Applications/dart/dart-sdk/bin/frogc, add in your own frogc path.If you're on Windows, the file will look rather similar, but you should change the "
cmd" line to:{ "cmd": ["cmd", "/C", "C:\\insert path here\\frogc.bat", "$file"], "file_regex": "^(.+\\.dart):(\\d+):(\\d+):.+\\[0m(.+)$", "selector": "source.dart" }To briefly explain what this does, the
cmdproperty is basically just what to run on the command line.frogcis simple to use: just invoke the command and feed it a file. The$filepart of that line is a variable that gets expanded automatically to the page of the current file.On Windows, things are a little funkier by default (at least in this scenario; that's not a dig at Microsoft, I swear!). What we have will run the Windows command line (
cmd) with the "don't keep the terminal window up" parameter (/C, though even the "keep the terminal window up"/Kparameter doesn't show it either), and run frogc.bat, passing it the full file path. This is the quick way to get it working, but does seem to produce errors in the current build. This is probably a temporary problem, as at the time of this writing these errors are produced with the standard SDK and not the latest SDK. See the next step for an alternate route.The
file_regexline is for error reporting purposes. If a line in the output of the command matches this regular expression pattern, it's recognized as an error and pressing F4 will highlight them for you in the output panel.Unfortunately frogc uses text-styling codes to make parts of the error message a different color and/or bold. When piped into Sublime Text, these style codes are presented as regular text, so the output can be a little hard to read, with
[0mand similar codes peppered amongst the human-readable text. I'm not aware of any way around this, sadly.The final line,
selector, specifies the scope in which this Build System should take place. With this set tosource.dart, Dart files should automatically choose this Build System. Sublime Text 2 knows that a ".dart" file is a, well, a Dart file thanks to the language grammar we installed.Save this file as
Dart-frogc.sublime-buildin[Sublime Data]/Packages/User/Dart/Optional Power-User Step for Windows
To avoid the aforementioned errors on Windows, and also make your build system fit more in line with the Mac and Linux versions, we can add the dart-sdk bin folder to the Windows environment, so that Sublime Text knows to look there for frogc.
To add the path, click Start, then right-click Computer, and select Properties. (Alternatively: Control Panel > System and Security > System.) Click "Advanced system settings", then on "Environment Variables."
Now, find the "path" variable, in either User Variables or System Variables (it works with either). If it doesn't exist, you can click New to create it, but if it does exist, then clicking New will overwrite it, so be careful.
Append the correct path to the end of what's already there, using a semicolon to separate it from everything else. No need to escape slashes or replace spaces with underscores or anything like that. Mine looks like:
(Scroll the above box to the right.)
That'll let you run
frogc c:\whatever\source.dartfrom the command window, but it still won't work within Sublime Text 2. For some reason, ST2 on Windows requires you to specify the file extension in your build system file, like so:At this point, you should have a usable build system on Windows that's less likely to break.
Step 6: Using the Build System
Go ahead and try our new Build System out. Open up a Dart file, and press F7 or Control-B (on the Mac, Command-B). "B" for Build.
You should see the output panel open up at the bottom, and if the Dart is error-free, you'll just see
[Finished].If you have errors, you'll get much more complex output. For example:
When this happens, press F4 to move forward through the various lines of error, and Shift-F4 to move backward. The error line will highlight in the output panel, and your cursor will be placed at the line and column identified by the error.
Step 7: Start Building Snippets
There are potentially many useful snippets to be added to a Dart bundle. Let me get you started by adding a snippet that creates a new method.
From the Sublime Text menu, choose Tools > New Snippet... You'll again be presented with a default file, this one in XML format. Change its contents to:
<snippet> <content><![CDATA[ ${1:void} ${2:methodName}(${3:arguments}) { $0${1/void|(.+)/(?1:\n\treturn null;)/} } ]]></content> <tabTrigger>method</tabTrigger> <scope>source.dart</scope> </snippet>Feel free to change the contents of the
<tabTrigger>node frommethodto something else that you'll find more useful. This is what you type before pressing Tab in order to get the snippet.Save the file as
method.sublime-snippet(the extension is crucial; the base name is what your snippet will show up as in the menus), in the following location relative to your Sublime Text 2 Packages folder:You should already have the "Dart" folder from the installation of the language grammar file.
Now try out your new snippet (you may need to restart Sublime Text, but I think this is no longer an issue).
In a Dart file, type "method" (or whatever you specified, if you forged your own tab trigger), press Tab, and watch it expand. You can tab through the various stops, starting at the return type, then to the method name, and finally in between the parentheses if you want to add arguments. The last tab will drop you at the first line of the method.
The cool part is that if you change the return type from
void, you get an automaticreturn nullstatement at the end of your method body. Naturally you'll want to adapt this to your needs, but hopefully it's a feature that saves a little typing. The magic happens in the unwieldy second line of the snippet; if you've never seen this before, then it's somewhat difficult to explain concisely, but it looks at the contents of the first tab stop (the return type) and if it's anything other than "void", it adds thereturn null. It might make sense if you've ever used Regular Expressions, particularly with the substitution syntax of/pattern/substitute/found in Perl.The field's wide open for the creation of time-saving Dart snippets. Feel free to post your snippets in the comments.
That's All
And there you have it; those of use who prefer a certain text editor over anything else can continue to do so, even with this new Dart language. Thanks for reading, and I hope you learned something about Sublime Text 2's extensibility along the way.
Impact is an incredibly powerful HTML5 game framework and one of it’s key advantages is its ability to run on many different platforms such as desktop browsers, mobile browser, as a native iOS or Win 8 Metro app, and on Chrome Market. In this video I will go over how I use Ant to automate building out versions of my game to each of these platforms and some things to keep in mind when you are looking into distributing your own game.
Watch the Screencast
You can also download the video to watch later.
More Info and Links
This video is based on a more detailed article I wrote called Automating Impact Builds With Ant. To learn more about Impact visit http://ImpactJS.com and check out a copy of my book on Impact called Introducing HTML5 Game Development, published by O’Reilly.
It’s not easy to create the UI side of your game with FlashPunk, as it doesn’t include any UI components like buttons or text fields by default. This isn’t a restriction, though; it just means you’re completely free to create the UI exactly as you like. But you need to know how to do it first! This tutorial will teach you how to build some custom UI components, and show you the different ways you can customize them to exactly fit the style of your game.
Final Result Preview
Let’s take a look at the final result we will be working towards:
Step 1: Introduction
Many FlashPunk users tend to have problems with the UI side of their games. There’s no ‘easy’ way of making buttons and other interactible-elements like text fields or checkboxes, for example, in FlashPunk. No Button class.
That may seem of a restriction, yes, and many newcomers find it a little bit confusing at first… but there’s a reason behind that. Games, each one of them, tend to have a custom user interface unique to themselves, which design is related to the mechanics or theme of the game itself. You won’t see any good game (generally speaking) that has the default window buttons for its controls!
We could argue that, in this case, there could be some classes providen with the bare-bones of the functionality, the minimum required for some buttons to work, and leave the graphic side to the user… yes, that is true… but the generalization we would have to use in those classes would be either too big and confusing or too specific and not costumizable enough. (believe me, I was in charge of the semi-failed semi-working Punk.UI project.) We will learn how to code our own components instead!
So what this tutorial is going to show you is how to build your own UI elements for your game in FlashPunk, give them behaviour, and show some tricks to make their graphic part with the most used techniques… but remember that each of your games will need a different UI graphically-wise!
As the tutorial is really lengthy, it’s been divided into multiple parts. This first part will teach you how to build each component, without the eye-candy and costumization. We will introduce these later.
To code the example SWF with our UI, we are going to use FlashPunk, as this is a FlashPunk tutorial, and FlashDevelop for the IDE. If you feel more comfortable with another IDE, like FlashBuilder, you are free to use that, just adapt the specific parts of this tutorial.
Previous knowledge on FlashPunk is needed to follow this tutorial. This is not a general FlashPunk tutorial, this is a UI tutorial using FlashPunk. If you don’t know FlashPunk, you can take a look at the Introductory FlashPunk tutorials on Activetuts+ and also check out the official FlashPunk tutorials.
Step 2: Create a New Project
Open FlashDevelop and click Project > New Project to open the New Project window.
Choose ActionScript 3 > AS3 Project. For the name of the project, put in “FlashPunk UI”. For the location, click and navigate to the folder you would like to save it into. Leave the “create directory for project” checkbox selected and click OK.
Step 3: Download the Latest FlashPunk
Go to the official FlashPunk webpage, FlashPunk.net, and click the Download button on the navigation bar. Then click the “Download FlashPunk” link on the top of the page. It should take you to the GitHub download webpage. Click the “Download .zip” button (or “Download .tar.gz” if you prefer that format) and save the file somewhere you know.
Step 4: Add FlashPunk to Our Project
Now that we have downloaded FlashPunk, we have to add it to our project. To do so, we will simply copy the “net” folder from the FlashPunk zip to our “src” folder in our project, like usual.
Step 5: Starting the Engine
We have to initialize FlashPunk in our document class now, so it takes control of our game, like on every FlashPunk project. We do so by making our document class extend the
Engineclass, and callingsuperwith the required parameters. We will give our application a size of 550×400 pixels. Don’t forget to right-click on our project, go to Properties and configure the dimensions to 550×400 pixels as well.package { import net.flashpunk.Engine; public class Main extends Engine { public function Main():void { super(550, 400); } } }Step 6: Creating Our World
Now, we have to create a FlashPunk World to hold our entities. We will place every UI component we create there, so we can test them. In a real-world case, each of our Menu States would be a different World, as well as the Game itself. So we will create a new class which will extend World, called TestWorld, in our “src” folder.
package { import net.flashpunk.World; public class TestWorld extends World { public function TestWorld() { super(); } } }Then we’ll tell our Engine class to go to our TestWorld on startup by overriding the init function. Don’t forget to import the class
FPfromnet.flashpunk!override public function init():void { super.init(); FP.world = new TestWorld; }Step 7: The Button Entity
The first thing we are going to build is our Button component. Every component we’re going to make will be an
Entity, as it’s the most logical step for making something in FlashPunk which will live in aWorld.First of all, we will create a new folder inside the “src” folder, to keep things a bit organized. We will name this folder “ui”, and will hold all of our components.
Then we create a class there named Button, which will extend
Entity. The package will beui, as it’s inside the ui folder.package ui { import net.flashpunk.Entity; public class Button extends Entity { public function Button(x:Number=0, y:Number=0) { super(x, y); } } }Now we will add a new instance of this
Buttonclass in our World, so we can see it working… when we finish it, as at the moment it’s an invisible Entity. So, add this in our TestWorld class, and don’t forget to import the Button class usingimport ui.Button;override public function begin():void { super.begin(); add(new Button(10, 10)); }Step 8: Graphic for Our Button
To make our button visible, it will need a graphic. I have created an image for our Button, which you can use freely, but you can also create your own graphic if you want:
Save this as “button.png” without the commas in a new folder named “gfx”, situated inside an assets folder which will be in the root of your project (at the same level of your src folder).
Now we need to insert this button graphic in our game. To do so, we will embed the image and then tell FlashPunk to use it as our graphic. To keep things a bit organized, we will embed everything we need in a new class called Assets. This is what I tend to do on all my projects, and it works like a charm! So we will proceed to create a new Assets class, and embed the graphic as a public static constant, so we can access it from outside:
package { public class Assets { [Embed(source = "../assets/gfx/button.png")] public static const BUTTON:Class; } }Finally, we will tell FlashPunk to use this as the graphic of our Button. We can use it as an Image or as a Stamp. The difference is, Image will consume more memory but will allow us to transform the graphic, and the Stamp will consume less memory but won’t allow any transformation at all, unless they are applied manually directly to the
BitmapData. We will currently use a Stamp, as we don’t need to transform the button yet. Add this to our Button class, and don’t forget to import Stamp.public function Button(x:Number=0, y:Number=0) { super(x, y); graphic = new Stamp(Assets.BUTTON); }If you test the project now, you will see our graphic on the World, but clicking on it won’t do anything. We will add some behaviour now!
Step 9: Adding Interactivity
To make an Entity respond to mouse clicks on FlashPunk, we just need to: check the mouse is over the entity and check if the mouse was released this frame. The second step is really easy, we just have to check the value of the
mouseReleasedvariable in theInputclass, but for the other, we must do a collision test between a point (mouse coordinates) and the entity, and to do so, we will need to define the entity collision. At the moment we will use a hitbox, as it’s the simplest option.So here’s the code achieving all of what we just said, with an explanation below:
package ui { import net.flashpunk.Entity; import net.flashpunk.FP; import net.flashpunk.graphics.Stamp; import net.flashpunk.utils.Input; public class Button extends Entity { public function Button(x:Number=0, y:Number=0) { super(x, y); graphic = new Stamp(Assets.BUTTON); setHitboxTo(graphic); } override public function update():void { super.update(); if (collidePoint(x, y, world.mouseX, world.mouseY)) { if (Input.mouseReleased) click(); } } protected function click():void { FP.screen.color = Math.random() * 0xFFFFFF; trace("click!"); } } }Some of you may notice this class would perform better if we checked the mouse state first and then check the collision, but as we will have to add the hover graphics, we would have to change it back to this, so we’ll leave it this way.
If you test the game now, it should look like this, but with your button graphic:
Step 10: Hover and Down Graphics
Right now, our Button is really boring, and it does not show ANY sign of interactivity, apart from its callback. It’s the time to add some graphics to show the different states: normal, hover, and down.
First of all, we need to make different graphics for each, so let’s get working! You can grab these two I made or simply make your own. Put them in the
gfxfolder with the namesbutton_hover.pngandbutton_down.png.button_hover.png
button_down.png
Then, we will add them in our Assets class.
Now we have to hold those graphics somewhere in our button, and switch to the correct one when it’s needed. So we will create three variables to hold the normal, the down, and the hover graphics respectively, and switch the graphic properties to each of the three as appropriate.
protected var normal:Graphic; protected var hover:Graphic; protected var down:Graphic; public function Button(x:Number=0, y:Number=0) { super(x, y); normal = new Stamp(Assets.BUTTON); hover = new Stamp(Assets.BUTTON_HOVER); down = new Stamp(Assets.BUTTON_DOWN); graphic = normal; setHitboxTo(graphic); }Step 11: Fix a Little Bug
Before making the graphic behaviour, we want do something else. We need to keep track of some data which will also solve a little issue: if I press the mouse outside the button, then go to the button and release the mouse, it will detect as a mouse click. We don’t want that. So we will create a new protected boolean called
clicked, which will simply tell us if the mouse was first pressed over the button or not.Then we will apply the following changes on the update function: first, inside the collision check, if the mouse was pressed this frame (
Input.mousePressed) we will set the clicked boolean totrue. Then, on the check for the released mouse button, we will also check for theclickedvariable, so we will only detect a button click if the mouse was pressed while over it before. Finally, outside of the collision check, we setclickedto false when the mouse is released.override public function update():void { super.update(); if (collidePoint(x, y, world.mouseX, world.mouseY)) { if (Input.mousePressed) clicked = true; if (clicked && Input.mouseReleased) click(); } if (Input.mouseReleased) clicked = false; }Step 12: Assigning the Hover and Down Graphics
For the graphics itself, we must first plan the behavior we have in mind. When the mouse is over the graphic and it’s not pressed, we will display the hover state. If the mouse is over the graphic and it’s pressed, we will display the pressed state. If the user presses the button and, while keeping the mouse button down, moves the mouse out of the button collision, we will display the hover state, imitating AS3′s
SimpleButtonbehavior. In all the other cases, we will display the normal state.override public function update():void { super.update(); if (collidePoint(x, y, world.mouseX, world.mouseY)) { if (Input.mousePressed) clicked = true; if (clicked) graphic = down; else graphic = hover; if (clicked && Input.mouseReleased) click(); } else { if (clicked) graphic = hover; else graphic = normal; } if (Input.mouseReleased) clicked = false; }Inside the button collision check we also check if the mouse button is being pressed at the moment. We will check that using the
clickedvariable, and not theInput.mouseDownvariable, because we want to be sure we show the pressed graphic the mouse has been clicked while over the button, not when clicked outside of the button and then dragged on top of it. In case the mouse is being pressed, we will display the down state, if not, the hover state, because the mouse will be over the button but it won’t be pressed.In the other pair of checks, when the mouse isn’t over the button, we check first if the mouse has been clicked. If it has, we will display the hover state as we said before. If not, the normal state will be shown.
Here you can see how it should look at the moment, but with your own graphics instead:
Step 13: Checkboxes
If you think about it, a checkbox isn’t really that different from a button. The only difference, apart from the graphic, is they also have a state which determines whether they are checked or not. In fact, a checkbox and a push button – which is a button that remains pressed until you click on it again – are the same.
For that reason, creating a checkbox is really easy if we know how to create a button. All we need to add is an extra variable that is toggled on each click, and with a few extra checks on the graphic changes, where we determine which version of the graphic to show: the checked or the unchecked one.
I would also like to teach you something extra as we do the checkbox. For the button, we created the graphics in different files, but what if we want all of the states in the same graphic? That’s pretty simple, we just need to use the
clipRectproperty of the Image class, as we will show when assigning our checkbox graphics.So, as checkboxes and buttons share so many features, it’s logical that we want our checkbox class to extend the button class. But, if we did that with the current code, we would have to replace the full update function to considerate our checkbox checked state on the graphics changes. Thus, before creating our Checkbox class, we will refactor our Button class a bit before, so things are easier and cleaner for us.
Step 14: Refactoring Our Button
To be able to insert the checked consideration when our graphics change, all we need to do is abstract the graphic change. So, instead of setting the graphic directly in the update function, we will call another function telling what state we want, and that function will do the actual graphic switch.
The function we will create will be called
changeState, and will accept one argument as an integer, the state. 0 will mean normal, 1 will mean hover and 2 will mean down. As we could get a bit confused and forget the meaning of those numbers easily (well, not in THIS case, but this technique may be useful to you in other, more complicated cases), we will create some constants that will hold this values instead.First, we create those constants on our Button class:
Then we substitute all the graphic changes to call our yet-to-be-created function:
override public function update():void { super.update(); if (collidePoint(x, y, world.mouseX, world.mouseY)) { if (Input.mousePressed) clicked = true; if (clicked) changeState(DOWN); else changeState(HOVER); if (clicked && Input.mouseReleased) click(); } else { if (clicked) changeState(HOVER); else changeState(NORMAL); } if (Input.mouseReleased) clicked = false; }Finally we create the function, using a switch statement with three cases:
protected function changeState(state:int = 0):void { switch(state) { case NORMAL: graphic = normal; break; case HOVER: graphic = hover; break; case DOWN: graphic = down; break; } }Now we’re ready to easily code our checkbox! But first…
Step 15: Checkbox Graphics
As we explained before, we will place all the checkbox graphics in a single file, so you can see both techniques (separate files or same files) and choose whichever you prefer.
The order of the file will be as follows: normal – hover – down; the top row will be the unchecked states and the bottom one will be the checked states. You can use your own graphics or download this one we provide. Don’t forget to save the graphic as
checkbox.pnginside thegfxfolder.Now we’ll add it to our Assets class so we can use it.
Finally, we will create our Checkbox class and setup the variables containing the graphics. So, first we will create the Checkbox class in the
uifolder, and make it extend our Button.package ui { public class Checkbox extends Button { public function Checkbox(x:Number=0, y:Number=0) { super(x, y); } } }Then, we will add three more variables containing the checked graphics. The unchecked graphics will be at the normal, hover and down variables we already have.
protected var normalChecked:Graphic; protected var hoverChecked:Graphic; protected var downChecked:Graphic; public function Checkbox(x:Number=0, y:Number=0) { super(x, y); }And now, we will populate them, as Images so we can clip them using the
clipRectvariable. This variable accepts a flashRectangle, which is a Class withx,y,widthandheightproperties. So, whenImagesees we provide a clipRect, it will crop itself using that information. That’s how it will look like in my case. You might have to adapt the values, so they fit your own graphics dimensions:public function Checkbox(x:Number=0, y:Number=0) { super(x, y); normal = new Image(Assets.CHECKBOX, new Rectangle(0, 0, 38, 34)); hover = new Image(Assets.CHECKBOX, new Rectangle(38, 0, 38, 34)); down = new Image(Assets.CHECKBOX, new Rectangle(76, 0, 38, 34)); normalChecked = new Image(Assets.CHECKBOX, new Rectangle(0, 34, 38, 34)); hoverChecked = new Image(Assets.CHECKBOX, new Rectangle(38, 34, 38, 34)); downChecked = new Image(Assets.CHECKBOX, new Rectangle(76, 34, 38, 34)); graphic = normal; setHitboxTo(normal); }If you take a look at the code, you can see that in the end we are also assigning our graphic to the normal state, and resizing our hitbox to match the Checkbox graphics.
Step 16: Adding Our Checkbox
Now we will add the checkbox into our World and see how it looks! Add this in our TestWorld class:
override public function begin():void { super.begin(); add(new Button(10, 10)); add(new Checkbox(20, 140)); }Now test the project… hey, wait! Our checkbox acts just like a normal button, it doesn’t check and uncheck itself! We haven’t added the behavior yet, that’s what we’re going to do now.
Step 17: Checking and Unchecking the Checkbox
First of all, we need to create a public boolean which will hold the checked state of our Button. It will be called… oh, surprise!
checked. So…Now, we will need to toggle this variable each time we click the checkbox. The easiest way to do so is to override the click function, and toggle it, so add this in our Checkbox:
override protected function click():void { checked = !checked; super.click(); }But, if we test the project, the checkbox won’t change yet. We need to make one last change: make a check when setting each graphic to change it to the checked or unchecked version. To do that, we just need to override the
changeStatefunction we refactored before:override protected function changeState(state:int = 0):void { if (checked) { switch(state) { case NORMAL: graphic = normalChecked; break; case HOVER: graphic = hoverChecked; break; case DOWN: graphic = downChecked; break; } } else { super.changeState(state); } }So first we check the checked property. If it’s true, we check the state we just changed to, and set it to our corresponding checked graphic. Otherwise, if the checkbox is not checked, we call our Button version of the changeState, which simply sets the graphic to the unchecked state. By using the
superthere, we need to write less code to do the same behavior! Yay!If we test the project, we can see the checkbox working now. It should look like this, but with your own graphics:
Step 18: Radio Buttons
If we think about it, a radio button is practically the same as a Checkbox. The only difference is, while the Checkbox is totally independent from the other checkboxes, a RadioButton is part of a group, and in that group, only ONE member can be checked at the same time, so we will have to handle that.
So, instead of making the RadioButton open and close itself, it will tell the group it needs to be checked, and the group will uncheck all of the other radio buttons, and check ours… and what’s the group?
Basically, the RadioButton Group will be a special class with an Array (well, in our case an AS3 Vector) containing all the RadioButtons belonging to the group. It will also contain methods to add and remove buttons from the group.
First of all, though, we will make the graphics for our RadioButtons…
Step 19: RadioButton Graphics
We will make the graphics for the RadioButton the same way we did it for the Checkbox. You can make your own costumized graphic if you want to, but if not, you can use this. Save your graphic as “radiobutton.png” in the gfx folder.
Now we’ll add it to our Assets class so we can use it.
After that, we create our RadioButton class which will extend RadioButton, and we’ll set up the graphics the same way we did it before.
package ui { import flash.geom.Rectangle; import net.flashpunk.graphics.Image; public class RadioButton extends Checkbox { public function RadioButton(x:Number=0, y:Number=0) { super(x, y); normal = new Image(Assets.RADIOBUTTON, new Rectangle(0, 0, 39, 44)); hover = new Image(Assets.RADIOBUTTON, new Rectangle(39, 0, 39, 44)); down = new Image(Assets.RADIOBUTTON, new Rectangle(78, 0, 39, 44)); normalChecked = new Image(Assets.RADIOBUTTON, new Rectangle(0, 44, 39, 44)); hoverChecked = new Image(Assets.RADIOBUTTON, new Rectangle(39, 44, 39, 44)); downChecked = new Image(Assets.RADIOBUTTON, new Rectangle(78, 44, 39, 44)); graphic = normal; setHitboxTo(normal); } } }Step 20: RadioButton Group
It’s time to make the radiobutton group itself now. The class will hold all the radiobuttons in a Vector of RadioButtons. It will also have the following methods: add(), for adding a new radio button, addList(), to add multiple radio buttons in a single step, remove(), to remove a radio button, removeList(), the equivalent of addList() but for removing, and removeAll(), to remove all the radio buttons from the group at once. It will also have a getAt() method, to get a radio button by the index, and a getIndex(), to get the index of a button. We won’t spend much time explaining those methods, as they are basic operations for arrays.
Then, when creating a RadioButton, it will ask for a radio button group as the parameter, and it will be added automatically there if provided. Also, when removing the RadioButton from the world, it will also be removed from its group. Finally, when clicked, it won’t do anything by itself but call an internal method of the group, which will be called click(). This method will uncheck all the radio buttons and check the one which called the method.
First of all, we create the group. I have provided some comments to explain a few things, but as it’s only basic operations with an array, I won’t explain it all:
package ui { public class RadioButtonGroup { public var buttons:Vector.<RadioButton> = new Vector.<RadioButton>; public function RadioButtonGroup(...buttons) { //we add the buttons provided to the constructor, if any if (buttons) addList(buttons); } public function add(button:RadioButton):void { buttons.push(button); } public function addList(...buttons):void { if (!buttons) return; if (buttons[0] is Array || buttons[0] is Vector.<RadioButton>) { //if the parameter is an array or vector of radio buttons, we add the buttons in the vector / array for each(var b:RadioButton in buttons[0]) add(b); } else { //if the parameters are simply a comma separated list of buttons, we add those instead for each(var r:RadioButton in buttons) add(r); } } public function remove(button:RadioButton):void { buttons.splice(getIndex(button), 1); } public function removeList(...buttons):void { if (!buttons) return; if (buttons[0] is Array || buttons[0] is Vector.<RadioButton>) { //if the parameter is an array or vector of radio buttons, we remove the buttons in the vector / array for each(var b:RadioButton in buttons[0]) remove(b); } else { //if the parameters are simply a comma separated list of buttons, we remove those instead for each(var r:RadioButton in buttons) remove(r); } } public function removeAll():void { //fastest way to clear a vector buttons.length = 0; } public function getAt(index:int):RadioButton { return buttons[index]; } public function getIndex(button:RadioButton):int { return buttons.indexOf(button); } } }Now, we will make our RadioButtons ask for a group on the constructor, and add themselves on it when provided:
public function RadioButton(x:Number=0, y:Number=0, group:RadioButtonGroup = null) { super(x, y); if (group) group.add(this); normal = new Image(Assets.RADIOBUTTON, new Rectangle(0, 0, 39, 44)); hover = new Image(Assets.RADIOBUTTON, new Rectangle(39, 0, 39, 44)); down = new Image(Assets.RADIOBUTTON, new Rectangle(78, 0, 39, 44)); normalChecked = new Image(Assets.RADIOBUTTON, new Rectangle(0, 44, 39, 44)); hoverChecked = new Image(Assets.RADIOBUTTON, new Rectangle(39, 44, 39, 44)); downChecked = new Image(Assets.RADIOBUTTON, new Rectangle(78, 44, 39, 44)); graphic = normal; setHitboxTo(normal); }Finally, we’ll add the buttons on the world, so we can test them. We will add 3 buttons in a group, and 2 in a different one.
override public function begin():void { super.begin(); add(new Button(10, 10)); add(new Checkbox(20, 140)); var group1:RadioButtonGroup = new RadioButtonGroup(); add(new RadioButton(20, 200, group1)); add(new RadioButton(20, 250, group1)); add(new RadioButton(20, 300, group1)); var group2:RadioButtonGroup = new RadioButtonGroup(); add(new RadioButton(200, 200, group2)); add(new RadioButton(200, 250, group2)); }If you test it now, the radio buttons will still behave as normal checkboxes. It’s time to change that now.
Step 21: RadioButton Click Behavior
First of all, we need to override the click function of the RadioButton, and instead of calling the code there is on the checkbox using super, we will call the still-to-be-created click function of our RadioButton group… oops! How are we going to call this function, if we haven’t got a reference to the group? A simple solution would be to set a reference from the group provided on the constructor but… then we won’t be able to change groups, and all of the methods we can see in the group will be useless.
What we are going to do instead is, first add a variable on the RadioButton which will reference its group, and we will set this on the added method of the group. We will also set it to null when removing the button:
public class RadioButton extends Checkbox { internal var group:RadioButtonGroup; // [...] all the methods in the RadioButton class were omitted for brevety. }Now we add this on the following methods of the RadioButton group:
public function add(button:RadioButton):void { button.group = this; buttons.push(button); }public function remove(button:RadioButton):void { button.group = null; buttons.splice(getIndex(button), 1); }And we will also set all the group references to null on the removeAll function:
public function removeAll():void { for each(var b:RadioButton in buttons) b.group = null; //fastest way to clear a vector buttons.length = 0; }Now we are ready to call the click function on the RadioButton!
override protected function click():void { group.click(this); }And finally we will build the click function. This function will uncheck all the RadioButtons in the group, and then check the button provided.
internal function click(target:RadioButton):void { for each(var b:RadioButton in buttons) b.checked = false; target.checked = true; }Now, just before testing, we will also make our button remove itself from the group when removed from the world.
override public function removed():void { super.removed(); group.remove(this); }This is how it will look like, but with your own graphics!
Step 22: Custom Parameters: Text
What if we want our buttons to contain some text? For example, in the menu of our game, we may want to have a Play button, a Help button, etc. and we want those buttons to have some text on them, which tells which of them is the play and which of them is the help. Currently, the only way we can do it is create a new image for each of them, create a new class as well and change the image in the class…
So what we can do is accept an extra parameter in our components: the text. This will be a string we will send to our components, and then they will display it as text. Super easy!
Let’s implement it in our Button now. First, we will add the parametrer text as a string, and also a label variable with type of Text, which is a FlashPunk graphic:
protected var label:Text; public function Button(x:Number=0, y:Number=0, text:String = "") { super(x, y); normal = new Stamp(Assets.BUTTON); hover = new Stamp(Assets.BUTTON_HOVER); down = new Stamp(Assets.BUTTON_DOWN); graphic = normal; setHitboxTo(graphic); }Then we will instantiate this text, with a size of 16 pixels and black color, with the width of the button (minus the borders), wordWrap activated and aligned to the center.
public function Button(x:Number=0, y:Number=0, text:String = "") { super(x, y); var normalStamp:Stamp = new Stamp(Assets.BUTTON); label = new Text(text, 10, 0, { size: 16, color: 0x000000, width: normalStamp.width - 30, wordWrap: true, align: "center" } ); normal = normalStamp; hover = new Stamp(Assets.BUTTON_HOVER); down = new Stamp(Assets.BUTTON_DOWN); graphic = normal; setHitboxTo(normalStamp); }We also created an extra variable, a Stamp, which will hold the stamp of the normal graphic, so we can reference its width. We set normal graphic to the normalStamp.
Now we need to display this text somewhere. To do this, we need to include it in the graphic of our button. In FlashPunk, to display more than a single graphic at once, we need to put all of them in a graphiclist, and use this as the graphic instead. So we will do something similar, to make all of our graphics contain the text:
public function Button(x:Number=0, y:Number=0, text:String = "") { super(x, y); var normalStamp:Stamp = new Stamp(Assets.BUTTON); label = new Text(text, 10, 0, { size: 16, color: 0x000000, width: normalStamp.width - 30, wordWrap: true, align: "center" } ); normal = new Graphiclist(normalStamp, label); hover = new Graphiclist(new Stamp(Assets.BUTTON_HOVER), label); down = new Graphiclist(new Stamp(Assets.BUTTON_DOWN), label); graphic = normal; setHitboxTo(normalStamp); }Finally, we will center our text vertically:
public function Button(x:Number=0, y:Number=0, text:String = "") { super(x, y); var normalStamp:Stamp = new Stamp(Assets.BUTTON); label = new Text(text, 10, 0, { size: 16, color: 0x000000, width: normalStamp.width - 30, wordWrap: true, align: "center" } ); label.y = (normalStamp.height - label.textHeight) * 0.5; normal = new Graphiclist(normalStamp, label); hover = new Graphiclist(new Stamp(Assets.BUTTON_HOVER), label); down = new Graphiclist(new Stamp(Assets.BUTTON_DOWN), label); graphic = normal; setHitboxTo(normalStamp); }So if we add some text in the button we created in our TestWorld, we will see something like this:
Step 23: The Problem With the Text
There is a little problem with the way we are doing Text at the moment: we need to create a new Graphiclist for each graphic. This means we have to write more code for EACH graphic we have, and we can’t have text on classes that extends us unless we also change that. A bit inconvenient.
So here’s my solution: instead of inserting the text in our graphics, we’ll just render it manually by overriding the render function.
Here’s a renderGraphic function I created, which mimics the rendering of the Entity class, but accepts the graphic as a parameter. We will add this to our button:
protected function renderGraphic(graphic:Graphic):void { if (graphic && graphic.visible) { if (graphic.relative) { _point.x = x; _point.y = y; } else _point.x = _point.y = 0; _camera.x = world ? world.camera.x : FP.camera.x; _camera.y = world ? world.camera.y : FP.camera.y; graphic.render(renderTarget ? renderTarget : FP.buffer, _point, _camera); } } protected var _point:Point = FP.point; protected var _camera:Point = FP.point2;Now we will set the graphics as they were before:
public function Button(x:Number=0, y:Number=0, text:String = "") { super(x, y); var normalStamp:Stamp = new Stamp(Assets.BUTTON); label = new Text(text, 10, 0, { size: 16, color: 0x000000, width: normalStamp.width - 30, wordWrap: true, align: "center" } ); label.y = (normalStamp.height - label.textHeight) * 0.5; normal = normalStamp; hover = new Stamp(Assets.BUTTON_HOVER); down = new Stamp(Assets.BUTTON_DOWN); graphic = normal; setHitboxTo(normalStamp); }And finally we will override the render function, to render the text as well as the button graphic:
override public function render():void { super.render(); renderGraphic(label); }It’s time to add text to our Checkbox as well! First of all, we must accept the text as a string. Then, as we want it completely different (width / height and color), we will replace the label, as following:
public function Checkbox(x:Number=0, y:Number=0, text:String = "") { super(x, y, text); normal = new Image(Assets.CHECKBOX, new Rectangle(0, 0, 38, 34)); hover = new Image(Assets.CHECKBOX, new Rectangle(38, 0, 38, 34)); down = new Image(Assets.CHECKBOX, new Rectangle(76, 0, 38, 34)); normalChecked = new Image(Assets.CHECKBOX, new Rectangle(0, 34, 38, 34)); hoverChecked = new Image(Assets.CHECKBOX, new Rectangle(38, 34, 38, 34)); downChecked = new Image(Assets.CHECKBOX, new Rectangle(76, 34, 38, 34)); label = new Text(text, 40, 0, { color: 0xFFFFFF, size: 16 } ); label.y = (Image(normal).height - label.textHeight) * 0.5; graphic = normal; setHitboxTo(normal); }And, thanks to the power of extending, to have text in our RadioButtons, we only have to accept the text parameter and send it to super (and center it vertically)!
public function RadioButton(x:Number=0, y:Number=0, group:RadioButtonGroup = null, text:String = "") { super(x, y, text); if (group) group.add(this); normal = new Image(Assets.RADIOBUTTON, new Rectangle(0, 0, 39, 44)); hover = new Image(Assets.RADIOBUTTON, new Rectangle(39, 0, 39, 44)); down = new Image(Assets.RADIOBUTTON, new Rectangle(78, 0, 39, 44)); normalChecked = new Image(Assets.RADIOBUTTON, new Rectangle(0, 44, 39, 44)); hoverChecked = new Image(Assets.RADIOBUTTON, new Rectangle(39, 44, 39, 44)); downChecked = new Image(Assets.RADIOBUTTON, new Rectangle(78, 44, 39, 44)); label.y = (Image(normal).height - label.textHeight) * 0.5; graphic = normal; setHitboxTo(normal); }In some applications and UIs, the “hitbox” of the checkbox / radiobutton also includes its text, so we can include that with a simple line in the Checkbox class, at the end of the constructor (and in RadioButton as well):
If we add the text in our TestWorld, and test the project, we will have something like this:
Step 25: Custom Parameters: Callbacks
So now we can create different buttons with different text easily, to differentiate them… but at the moment, all our buttons do is change the background color. There’s no use in having zillions of buttons if all of them… well, just change the background color. If we wanted to have different functionalities, with the current code, what we’d have to do is create a Button class for each functionality a button will do… that’s a no-no!
What we’re going to do instead is use a really similar approach to the text problem: we’ll add a parameter for the functionality. This parameter will be simply a function. We’ll send a function name to it, and when the button is clicked, the function will be called. This way we can have in our World three functions: gotoGame, gotoOptions and gotoCredits. Then, we can link each of them to the Play button, the Options button and the Credits button.
Doing this is extremely easy. We just need to accept the callback parameter, store it in our Button variables, and call it on the click function. Yay! We’ll also remove the background color code.
Part of the button class variables and part of its constructor:
//[...] protected var label:Text; public var callback:Function; public function Button(x:Number=0, y:Number=0, text:String = "", callback:Function = null) { super(x, y); this.callback = callback; //[...] }And the click function, only calling the callback if a callback was provided:
protected function click():void { if (callback != null) callback(); }That’s it… but I want to add an extra feature for the checkboxes. The whole point of creating a checkbox is being able to determine if it’s checked or unchecked. The current way to do it is keep a reference of the checkbox in the World class, and then check its clicked property on the callback… but it’s a bit tedious having to mantain references to each checkbox in our world, if we have many of them. So what we’re going to do is: send a boolean parameter to the callback, with the value of the checked property. So, for the checkbox callback, we’ll have to accept a boolean, the value of which will be the checked value of the checkbox. Nice!
Here’s the new checkbox click function:
override protected function click():void { checked = !checked; if (callback != null) callback(checked); }Remember to also ask for the callback parameter, and send it to super, as we show in this fragment of the Checkbox constructor:
public function Checkbox(x:Number=0, y:Number=0, text:String = "", callback:Function = null) { super(x, y, text, callback); //[...] }And in case of the radiobuttons, I think we need a different approach. Usually, with a radiobutton, you don’t want to determine the click of each individual radiobutton… what you want to do is determine which is the new clicked button in the group. That’s why I think the callback shouldn’t be on the button itself, but on the RadioButton group. Moreover, we also want this callback to provide information to determine which radiobutton was clicked. This can be sorted easily by demanding an extra parameter on the RadioButton: an ID, and sending that to the callback.
So, first of all, we add the id parameter on the radiobuttons, as shown in this fragment of the RadioButton constructor.
public var id:String = ""; public function RadioButton(x:Number=0, y:Number=0, group:RadioButtonGroup = null, text:String = "", id:String = "") { super(x, y, text); this.id = id; //[...] }Then, we send it to the group in the click function.
override protected function click():void { group.click(this, id); }Now it’s the turn of the RadioButtonGroup. First, we add the callback parameter:
public var callback:Function = null public function RadioButtonGroup(callback:Function = null, ...buttons) { this.callback = callback; //we add the buttons provided to the constructor, if any if (buttons) addList(buttons); }Then, we call it with the id provided when a RadioButton from the group is clicked:
internal function click(target:RadioButton, id:String):void { if (callback != null) callback(id); for each(var b:RadioButton in buttons) b.checked = false; target.checked = true; }That’s it!
Step 26: Custom Parameters: Custom Parameters
Custom parameterception! Basically, let’s say we have a game with 30 levels. We want to create a Level Screen, where the user can select the level they want to play. If we had to create a function to go to each level, it would be a pain… really simpler if we were able to pass the level number to the callback! This way, we assign the level number when creating the button from, possibly, a loop, and then the callback reads the number and shows us the correspondant level.
If we asked for an extra argument called level number, though, this solution wouldn’t work for any other case where we need extra parameters. What we are going to do instead is, ask for an optional parameter Object. As it will be an object, it can be an int, a String, a custom class, even an array to contain multiple params… or an Object itself, in this syntax:
{param: "value", param2: 1, param3: false}. This way, we can have multiple parameters which can be retrieved like this:object.param,object.param2, etc.To implement this is really simple. We just need to ask for an extra param, called
params, and send it to the callback. You should be able to do it on your own, but just in case, here’s the code for Button and Checkbox:protected var label:Text; public var callback:Function; public var params:Object; public function Button(x:Number=0, y:Number=0, text:String = "", callback:Function = null, params:Object = null) { super(x, y); this.callback = callback; this.params = params; //[...] } //[...] protected function click():void { if (callback != null) { if (params != null) callback(params); else callback(); } }And now the checkbox:
public function Checkbox(x:Number=0, y:Number=0, text:String = "", callback:Function = null, params:Object = null) { super(x, y, text, callback, params); //[...] } override protected function click():void { checked = !checked; if (callback != null) { if (params != null) callback(checked, params); else callback(checked); } }Now, for the RadioButton, we want the params to be in the button, but they will be transfered to the group and sent using the group callback… wait a minute! We already have something which does just like that! But it’s called ID and it is a String. I think we can safely say we can change ID to params and set it to object, and we will be able to use it for the same reason as ID and as extra params as well.
Basically, we need to remove the id variable on the RadioButton and rename the param in the constructor:
public function RadioButton(x:Number=0, y:Number=0, group:RadioButtonGroup = null, text:String = "", params:Object = null) { super(x, y, text, null, params); //[...] }Then we send the params on the click function instead of the id:
override protected function click():void { group.click(this, params); }And we change the click function on the group reflecting these changes as well:
internal function click(target:RadioButton, params:Object):void { if (callback != null) callback(params); for each(var b:RadioButton in buttons) b.checked = false; target.checked = true; }Step 27: Arcade Text Input
Text Inputs (text fields) are commonly used in games. Most games need at least one text input from the user: to set their name for the score. Depending on the game, there might be other uses for text inputs. Now we’re going to learn how to make them in FlashPunk, without using the AS3 TextField.
Note that, by implementing the TextInput directly in FlashPunk, there are some kind of characters, like accents (àáèéìíòóùú) which can’t be typed. If you need those, you may want to add AS3 TextFields to FlashPunk directly by adding them on the stage (
FP.stage.addChild) or to the engine MovieClip (FP.engine.addChild). Those won’t really be necessary if you are using English text, but other languages have them so keep that in mind.First of all, we’ll build the TextInput component. The class will extend Entity, and will have two custom properties: text, as a String, and textGraphic, of the type Text. text will contain the text inputted in the TextInput, and textGraphic will be the visual representation of it. We will implement text as a getter/setter, because when we change it through code, we also want to update the visual representation.
package ui { import net.flashpunk.Entity; import net.flashpunk.graphics.Text; public class TextInput extends Entity { protected var _text:String = ""; protected var textGraphic:Text; public function TextInput(x:Number=0, y:Number=0, text:String = "") { super(x, y); textGraphic = new Text("", 0, 0, { size: 16, color: 0xFFFFFF } ); this.text = text; graphic = textGraphic; } public function get text():String { return _text; } public function set text(value:String):void { _text = value; textGraphic.text = value; } } }Now we need to check for each key and write them on the text string… or use a really helpful variable provided in the Input class! The variable is called keyString, and registers the last 100 keys that were written by the user. This way, we can retrieve the string to know what the user typed. The simplest way is to add an update function to our textField, add all the keys in the variable to our text, and clear the variable so we don’t duplicate the keys we already retrieved.
override public function update():void { super.update(); if (Input.keyString != "") { text += Input.keyString; Input.keyString = ""; } }Step 28: Erasing Text and Multiline Text
One thing the Input keyString variable doesn’t support is erasing text. We must add the functionality by hand. But it’s really easy, we just check if the backspace key was pressed, and if it was, delete a character from the string.
override public function update():void { super.update(); if (Input.keyString != "") { text += Input.keyString; Input.keyString = ""; } if (Input.pressed(Key.BACKSPACE)) text = _text.substr(0, _text.length - 1); }The problem is that this method won’t erase if the user keeps the backspace key pressed. To do so, we will use a KeyboardEvent, which we will add to the stage. We will also remove the event when the text input is removed, and it won’t do anything if it detects the current world is not the world the text is in.
override public function added():void { super.added(); FP.stage.addEventListener(KeyboardEvent.KEY_DOWN, onKeyDown); } protected function onKeyDown(e:KeyboardEvent):void { if (world != FP.world) return; if (e.keyCode != Key.BACKSPACE) return; text = _text.substr(0, _text.length - 1); } override public function removed():void { super.removed(); FP.stage.removeEventListener(KeyboardEvent.KEY_DOWN, onKeyDown); }From here, adding multiline is really simple. We just need to check for the Enter key on the
onKeyDownfunction, and insert the"\n"character to the string:protected function onKeyDown(e:KeyboardEvent):void { if (world != FP.world) return; if (e.keyCode == Key.BACKSPACE) text = _text.substr(0, _text.length - 1); else if (e.keyCode == Key.ENTER) text += "\n"; }We could even add a boolean to allow or not multiline. This way we can have the “textfields” and the “textareas”. First, we add it to our variables and ask it as an optional parameter for the constructor:
protected var multiline:Boolean = false; public function TextInput(x:Number=0, y:Number=0, text:String = "", multiline:Boolean = false) { super(x, y); this.multiline = multiline; textGraphic = new Text("", 0, 0, { size: 16, color: 0xFFFFFF } ); this.text = text; graphic = textGraphic; }Then, we just add the check to the onKeyDown function.
protected function onKeyDown(e:KeyboardEvent):void { if (world != FP.world) return; if (e.keyCode == Key.BACKSPACE) text = _text.substr(0, _text.length - 1); else if (e.keyCode == Key.ENTER && multiline) text += "\n"; }Now, if you add a multiline textfield to your world, this is approximately what you will see:
Step 29: Multiple Text Operations
If you try adding two TextI
The newest Adobe Creative Suite has been announced. It’ll be available to purchase on May 7th; let’s take a look at what’s new for Flash app and game developers.
What’s New in Flash Professional CS6?
Most of the big new features in the flagship Flash software do not involve Flash Player at all; the one exception seems to be integration with Starling, the Stage3D library for 2D assets which we’ve covered before. Other than that, the emphasis is on mobile and HTML5 development.
A new mobile simulator lets you emulate tilting and rotating a phone (affecting the acceleromoter and the screen orientation), as well as touch gestures such as pinch-to-zoom. There are also new debugging features. I’ll let Mobiletuts+ go into more detail on these additions!
Flash Pro CS6 also has the ability to export to the HTML5 library CreateJS, which we’ve also covered before under the name EaselJS. No, this doesn’t mean you can take an existing Flash app or game and create an HTML5 canvas version, but you can export animations, images, and sounds, both from the stage and from the library, into clean JavaScript format.
Along similar lines, movie clips can also be exported to sprite sheets, which will be useful for game development in both HTML5 and Flash Player (as well as pretty much any other platform, for that matter).
What About Flash Builder and Flash Catalyst?
Flash Builder is not a “Creative Suite” product – it doesn’t have the CS name – so it runs on a different upgrade schedule. This means it’s not going to be updated to coincide with the CS6 launch. It has been dropped from the Web Premium suite, however, since the Web Premium suite no longer exists (it’s been combined with Design Premium to form Web and Design Premium), but it’s still available in the Master Collection.
Flash Catalyst, on the other hand, has been dropped; there will not be a Flash Catalyst CS6.
Creative Cloud
CS6 in general also sees the launch of the Adobe Creative Cloud; in brief, this allows you to pay an ongoing subscription fee to get every single CS6 app. For some people, this will be a much more attractive or convenient option than buying the entire Suite as a set of software – especially as there’s no additional fee to get future updates.
What Do You Think?
Personally, I think it’s interesting (but not at all surprising) that CS6 does not have much to offer programmers. I feel that’s been the case with Flash Professional for a while now; the Flash Platform and AS3 are not constrained to the 18- or 12-month Creative Suite release schedule, and FlashDevelop, Flash Builder and FDT are far better tools for coding anyway. (With that in mind, I am surprised that Flash Builder is not included in the Design and Web Premium bundle.)
The new sprite sheet and CreateJS export features will be useful for developers that want to port old Flash projects to Stage3D, mobile, HTML5, or other platforms, as well as for designers that work with non-Flash developers but want to keep their familiar Flash workflow. This isn’t something that interests me enough to upgrade, personally, but I don’t think it’s a bad idea.
What about you?
In this video I will briefly go over one of my Impact games, how I set up some of the core logic and discuss how Impact’s level editor works. Creating games with Impact is incredibly straight forward but with the tips from this video you will get a sense of what a final game looks like, how it’s organized as well as some helpful tricks when it comes to working with the level editor.
Watch the Screencast
You can also download the video to watch later.
More Info and Links
Click here to play Resident Raver
To learn more about Impact visit http://ImpactJS.com and check out a copy of my book on Impact called Introducing HTML5 Game Development, published by O’Reilly.
You can also play the Resident Raver game at http://gamecook.com/games/resident-raver/.
Impact is an incredibly powerful HTML5 game framework which takes advantage of modern browser’s canvas element and can also run on mobile or be compile into a native iOS app. In this video I will go over the framework, how to set up a project, some background into how to create classes in it and finally go over the core classes that make up the framework. This is a high level overview which will give you a general sense for how things work.
Watch the Screencast
You can also download the video to watch later.
More Info and Links
To learn more about Impact visit http://ImpactJS.com and check out a copy of my book on Impact called Introducing HTML5 Game Development, published by O’Reilly.
There are three more videos in this mini-series, and we’ll be posting them all this week, so come back later for more!