Huge Redesign and Relaunch of Tuts+ Premium
As you may know, the Tuts+ network is accompanied by an online educational members-only site called Tuts+ Premium. We’re very excited to announce that Tuts+ Premium has received a huge upgrade, including a new library of courses, 27 top-selling educational eBooks, member forums, and a completely redesigned UI. You can check out all the changes at tutsplus.com (I recommend taking the tour) or read on to learn about what you will get from Tuts+ Premium.
Library of Courses
You’ve seen Sessions and series at Activetuts+ and on the other Tuts+ sites; the new Tuts+ Premium introduces courses.
Would you like to learn how to design your first website in 30 days? Or get to grips with the languages of the web, HTML & CSS? Perhaps you’re already familiar with that, and you’re more interested in understanding the essentials of CSS3, or maybe you’d like to study something completely unrelated to web development, like using Photoshop to create concept art. Our new Tuts+ Premium courses will show you how. We’ll be adding new courses several times per month.
45 Exclusive Flash and Browser App Tutorials
Tuts+ Premium includes 45 (and counting) in-depth tutorials on browser app and game development, covering the same kinds of topics you’re used to from Activetuts+, but in much more detail:
- Carlos Yanez has a set of tutorials explaining how to create various simple games from scratch – design and code
- Jon Reid has written a great guide to an unusual topic: using the Kinect with the Flash Player
- Mathias Johansson has created a brilliant tutorial explaining the basics of advanced body mechanics (for animation)
- Daniel Branicki has shown how to create a Match-3 game in Flash and a 2D Portal-style game in Unity, in tutorials so big they each require multiple parts
- Freelance Confidential –
$29Free for Tuts+ Premium members - Successful Facebook Marketing –
$24Free for Tuts+ Premium members - How to Be a Rockstar Freelancer –
$29Free for Tuts+ Premium members - Twitter Up Your Business –
$8Free for Tuts+ Premium members - How to Build a Successful Blog Business –
$39Free for Tuts+ Premium members - How to Take Great Photos –
$9Free for Tuts+ Premium members - … and lots more!
…and there’s plenty more, on animation, game engine development, 3D user interfaces, and special effects.
Every tutorial now has a free preview, so you can get a taste of what’s in store before you buy.
My Thoughts
Earlier this year, I got to manage the awesome team that migrated the tutorials from the old Tuts+ Premium system to this new one, so I’m very familiar with both systems and the content. I think it’s fair to say that the old system… had some flaws. It could be difficult to find tutorials unless you were looking for one specifically, and having to download and extract a ZIP file (which in some cases could be over 1GB) just to access the tut was a huge pain.
The new Premium is better in so many ways. You can filter tutorials by topic, by difficulty, and by completion time – and search across the entire library – so it’s much easier to browse for and discover content. Reading tutorials and watching screencasts is much easier too; they’re all accessible in your browser, with an interface similar to the regular Tuts+ sites.
And I must confess: before doing the migration, I didn’t realise how much great content there is on Premium. I don’t just mean the Flash and RIA Premium tutorials – although that selection is excellent, and becoming even better as we add more and more (you should see what we have planned!) – I mean all the content from the other Tuts+ sites that I wasn’t even aware of.
For example, Aetuts+ has some excellent videos about animation, like The 12 Basic Principles of Animation, that are relevant to anyone doing animation, game design, or even flashy UI design. Cgtuts+ has some incredible series on modeling 3D objects, like this next-gen armoured car, which will be useful to anyone creating assets for a Unity project. And if you want to learn JavaScript, Nettuts+ has you covered.
I’ve highlighted tutorials that are related to the topics we cover on Activetuts+, but if you want to branch out and learn something new, there’s plenty of opportunity to do that as well. Illustration, photography, digital audio, mobile app development… oh, and you have to check out Ed Lopez’s amazing digital painting tutorials.
The new extras – forums, ebooks, courses – are all great, but to me, the appeal of Tuts+ Premium lies in its tutorials. Now, at last, those tutorials are easy to find and easy to read (or watch, for screencasts). That alone is worth the $19 a month entry price.
Top-selling Educational eBooks
Tuts+ Premium memberships now include 27 top-selling eBooks worth more than $440, including:
Beautiful Redesign
The new Tuts+ Premium was designed by Orman Clark and Envato designer Jacob Zinman-Jeanes.
View full post on Activetuts+
As you may know, the Tuts+ network is accompanied by an online educational members-only site called Tuts+ Premium. We’re very excited to announce that Tuts+ Premium has received a huge upgrade, including a new library of courses, 27 top-selling educational eBooks, member forums, and a completely redesigned UI. You can check out all the changes at tutsplus.com (I recommend taking the tour) or read on to learn about what you will get from Tuts+ Premium.
Library of Courses
You’ve seen Sessions and series at Activetuts+ and on the other Tuts+ sites; the new Tuts+ Premium introduces courses.
Would you like to learn how to design your first website in 30 days? Or get to grips with the languages of the web, HTML & CSS? Perhaps you’re already familiar with that, and you’re more interested in understanding the essentials of CSS3, or maybe you’d like to study something completely unrelated to web development, like using Photoshop to create concept art. Our new Tuts+ Premium courses will show you how. We’ll be adding new courses several times per month.
45 Exclusive Flash and Browser App Tutorials
Tuts+ Premium includes 45 (and counting) in-depth tutorials on browser app and game development, covering the same kinds of topics you’re used to from Activetuts+, but in much more detail:
…and there’s plenty more, on animation, game engine development, 3D user interfaces, and special effects.
Every tutorial now has a free preview, so you can get a taste of what’s in store before you buy.
My Thoughts
Earlier this year, I got to manage the awesome team that migrated the tutorials from the old Tuts+ Premium system to this new one, so I’m very familiar with both systems and the content. I think it’s fair to say that the old system… had some flaws. It could be difficult to find tutorials unless you were looking for one specifically, and having to download and extract a ZIP file (which in some cases could be over 1GB) just to access the tut was a huge pain.
The new Premium is better in so many ways. You can filter tutorials by topic, by difficulty, and by completion time – and search across the entire library – so it’s much easier to browse for and discover content. Reading tutorials and watching screencasts is much easier too; they’re all accessible in your browser, with an interface similar to the regular Tuts+ sites.
And I must confess: before doing the migration, I didn’t realise how much great content there is on Premium. I don’t just mean the Flash and RIA Premium tutorials – although that selection is excellent, and becoming even better as we add more and more (you should see what we have planned!) – I mean all the content from the other Tuts+ sites that I wasn’t even aware of.
For example, Aetuts+ has some excellent videos about animation, like The 12 Basic Principles of Animation, that are relevant to anyone doing animation, game design, or even flashy UI design. Cgtuts+ has some incredible series on modeling 3D objects, like this next-gen armoured car, which will be useful to anyone creating assets for a Unity project. And if you want to learn JavaScript, Nettuts+ has you covered.
I’ve highlighted tutorials that are related to the topics we cover on Activetuts+, but if you want to branch out and learn something new, there’s plenty of opportunity to do that as well. Illustration, photography, digital audio, mobile app development… oh, and you have to check out Ed Lopez’s amazing digital painting tutorials.
The new extras – forums, ebooks, courses – are all great, but to me, the appeal of Tuts+ Premium lies in its tutorials. Now, at last, those tutorials are easy to find and easy to read (or watch, for screencasts). That alone is worth the $19 a month entry price.
Top-selling Educational eBooks
Tuts+ Premium memberships now include 27 top-selling eBooks worth more than $440, including:
$29Free for Tuts+ Premium members$24Free for Tuts+ Premium members$29Free for Tuts+ Premium members$8Free for Tuts+ Premium members$39Free for Tuts+ Premium members$9Free for Tuts+ Premium membersBeautiful Redesign
The new Tuts+ Premium was designed by Orman Clark and Envato designer Jacob Zinman-Jeanes.
Take a Tour of Tuts+ Premium
Twice a month, we revisit some of our readers’ favorite posts from throughout the history of Activetuts+. This tutorial was first published in Dec, 2010.
In this tutorial you’ll build an extreme particle system whilst learning how to squeeze more efficient goodness out of the Flash Player than you ever thought possible!
Final Result
Here are a couple of examples of what we’ll be working towards:
EPILEPSY WARNING:
Please don’t view this demo if you are likely to suffer from epileptic attacks or loss of consciousness, particularly when looking at some types of strong flashing lights, rapid succession of images, simple geometric shapes, flashes or explosions.
Introduction: What Will You Learn?
Many users, from beginners to advanced, can still be seen using less than efficient Actionscript 3.0. In all likelyhood, this is because the efficient ways are made to sound a bit more difficult and aimed at highly advanced users. This tutorial will show you that these methods can be used by everyone, and they’re more useful than you may think!
The aim of this tutorial is to let you tackle those tasks that require working with a lot of data, very fast, with ease.
Helpful Hint: This tutorial will feature a lot of coding so I recommend using a more user friendly coding interface. I recommend FlashDevelop, it has some of the best code hinting around and best of all, it’s completely free! But I’m sure most of you will just copy and paste if do anything at all
Step 1 Check out That FPS!
At the heart of making all things efficient in the Flash Player is the FPS (Frames Per Second) of your SWF. The proffered target of your SWF can be set in the Flash Professional interface or, a new feature in Actionscript 3.0, you can change the FPS of the stage at runtime.
However, this will only ever get and set the target FPS (what the Flash Player will attempt to play at), which makes it pretty useless for preformance testing. You might think that the lovely folks over at Adobe would made a nice neat way to find you real FPS but, nope. You’ve got to do the math for yourself. Let’s take a look.
FPS can be defined as the time difference between the current frame and the last.
So all we need is some way to track the time difference from this frame to the previous frame of the SWF. This uses the document class feature. If you are unsure how to use this, check out this Quick Tip on how to use a document class.
package { //imports import flash.events.Event; import flash.utils.getTimer; import flash.display.MovieClip; public class FPSCalculator extends MovieClip { //variable to hold the current time private var currentTime:int = 0; public function FPSCalculator() { //add the enter frame listener, this is fired when the SWF updates to a new frame stage.addEventListener(Event.ENTER_FRAME, onFrameLoop); } private function onFrameLoop (evt:Event):void{ //for the sanity of the fellow developers, try to put each task into a seperate function. //this makes it infinitely easier to read for them and yourself on a large project or when you come back to and old one //since the getTimer() function returns the played time in milliseconds and we want FPSecond, we divide it into 1000 var fps:Number = (1000 / timeDifference); trace(fps); } //this is a get function so it can be referenced just like a variable, without the brackets on the end like a normal function private function get timeDifference ():int{ //the getTimer() function returns the total played time of the SWF in milliseconds var totalPlayedTime:int = getTimer(); //The difference in time from the previous frame to this frame will to calculated here var timeDifference:int = (totalPlayedTime - currentTime); //The currentTime is set to the total played time so it is ready for the next frame currentTime = getTimer(); //return the difference in time return timeDifference } } }We will use this function as the benchmark for comparing the efficiency of different methods from here on. As you might have noticed, we use the function to calculate the time difference, not the FPS. This is because tracing the time difference is actually much more useful and easier to read when we get to the speed tests. Calculating the FPS only becomes useful when we are putting everything together at the end.
Tip #1 Arrays vs. Vectors
Have you ever needed to store a whole bunch of numbers, strings or objects in a list? Of course you have! But the question is – have you been doing it right?
If the first thing you think think of when making a list in AS3 is an Array, then this tip is for you. A Vector is exactly the same as an ordinary Array except for one fact, it is a typed Array. This means that you can only populate it with one type of item. For instance, you can put a number and a string in the same Array, but not in a Vector.
Let’s take a look at the only difference between an Array and a Vector, declaring the Vector.
private function Arrayvs.VectorDifferences ():void{ //delare the array and the vector, this is the only difference between the two var myArray:Array = new Array(); var myVector:Vector.<String> = new Vector.<String>; //populate them in the same way myArray.push("this", "is", "an", "Array"); myVector.push("this", "is", "a", "Vector"); //call elements and length in the same way trace( myArray[myArray.length - 1] ); //Array trace( myVector[myVector.length - 1] ); //Vector //The following creates an error - "Access of possibly undefined property x through a reference with static type String." trace( myVector[myVector.length - 1].x ); //The Flash Player casts the movieclip as a string and a string does not have an 'x' value. }As seen above, declaring the vector is the only difference between the two types. To have the Vector hold another object, just replace
Stringwith your object. For holding MovieClips for example:How does this make it more useful? If all the elements in a Vector are the same type then the Flash Player can zip through them much much quicker because it knows what’s coming up and doesn’t have to test the next element every time (this is true even when declaring a variable type, so never leave it out!).
How big is the difference? Surprisingly big actually! Let’s take a look at our first speed test.
Speed Test #1 Array vs. Vector
package { //imports import flash.utils.getTimer; import flash.display.MovieClip; public class Arrayvs.Vector extends MovieClip { private var currentTime:int = 0; //we want to read and write into the array and vector 10,000,000 times. //this will provide a good indication of the speed difference //dont worry, it wont crash you computer but the FLash Player will pause for about 3 to 5 seconds private var n:int = 10000000 //Declare the Array and Vector private var myArray:Array = new Array(); private var myVector:Vector.<int> = new Vector.<int>; public function Arrayvs.Vector() { //time test for writing to the array and vector write(); trace("----"); //time test for reading from the array and vector read(); } private function write ():void{ trace("Writing Times"); timeDifference //for n times, push i into the array for(var i:int = 0; i < n; i++){ myArray.push(i); } //trace the time taken trace("Array: " + timeDifference + "ms"); //for n times push j into the vector for(var j:int = 0; j < n; j++){ myVector.push(j); } //trace the time taken trace("Vector: " + timeDifference + "ms"); } private function read():void{ var num:int = 0; trace("Reading Times"); timeDifference //for n times, set num to the corresponding array value for(var i:int = 0; i < n; i++){ num = myArray[i]; } //trace the time taken trace("Array: "+ timeDifference + "ms"); //for n times, set num to the corresponding vector value for(var j:int = 0; j < n; j++){ num = myVector[j]; } //trace the time taken trace("Vector: " + timeDifference + "ms"); } private function get timeDifference ():int{ var totalPlayedTime:int = getTimer(); var timeDifference:int = (totalPlayedTime - currentTime); currentTime = getTimer(); return timeDifference } private function Arrayvs.VectorDifferences ():void{ //delare the array and the vector, this is the only difference between the two var myArray:Array = new Array(); var myVector:Vector.<String> = new Vector.<String>; //populate them in the same way myArray.push("this", "is", "an", "Array"); myVector.push("this", "is", "a", "Vector"); //call elements and length in the same way trace( myArray[myArray.length - 1] ); //Array trace( myVector[myVector.length - 1] ); //Vector //pushing in a non-string value myVector.push(new MovieClip()); //The following creates an error - "Access of possibly undefined property x through a reference with static type String." //trace( myVector[myVector.length - 1].x ); //The Flash Player casts the movieclip as a string and a string does not have an 'x' value. } } }This outputs the following:
You shouldn’t get exactly the same results as what I have here of course, you will almost never get the same set of values yourself even as this depends on how much effort your CPU can push into this at runtime.
The first pair of values comes from writing into the array and vector respectively. We can see that the Vector shaved off almost 0.6 seconds, quiet a substancial amount if we need to do something similar 24 (standard FPS for flash movies) times a second. After all, 1/24th of a second is just over 0.04 seconds.
An even bigger percentage difference can be found when you are reading from an Array vs. from a Vector, and this is luckily what you will need to do most of the time every frame.
Hopefully, after reading this section you should be comfortable with using Vectors in your projects for that extra kick of efficiency.
Tip #2 Event Listeners
Like all things in Flash, there’s more than one way to solve a problem, Event Listeners are no exception. In this tutorial we will look two methods of attaching the
Event.ENTER_FRAMElistener to your particles.Method #1 One Listener per Particle
The idea behind this approach is that you attach a listener to each of your particles and direct them to a set function. This isn’t ideal for what we have in mind but remember a particle, in terms of programming, doesn’t have to be a single dot. For instance, this method might be preferred when going between Flash based webpages or objects that are treated differently in the listener function. Let’s take a look.
private function createPages():void{ //create 10 webpages for(var i:int = 0; i < 10; i++){ //create a new webpage as a movieclip var webpage:MovieClip = new MovieClip(); //add the listener webpage.addEventListener(Event.ENTER_FRAME, onWebpageLoop); } } private function onWebpageLoop (evt:Event):void{ //all webpages call this function every frame //evt.target is the webpage }Method #2 One Listener to Rule Them All…
The second method is the one that we will be using and the preferred method when dealing with a lot of similar objects. The idea here is to attach a single listener to only one object – usually the stage – which then loops through each of the particles and tells each one what to do on each frame. This method is slightly more complex as we need some way to reference the particles, so we put them into a Vector. Let’s take a look.
private function createPages2():void{ //create 10 webpages for(var i:int = 0; i < 10; i++){ //add a movieclip to the webpagesHolder //reducing the number of variables and steps used increases the speed webpagesHolder.push(new MovieClip()); } //add the listener stage.addEventListener(Event.ENTER_FRAME, onStageLoop); } private function onStageLoop (evt:Event):void{ //called only once when the stage changes frame for(var i:int = 0; i < 10; i++){ //webpageHolder[i] is the webpage } }Speed Test #2 Methods of Using Event Listeners
Unfortunately there is no hard and fast way to accurately check the difference in speed between these two methods because of the inconsistencies of the calling process while using method one (at least not an accurate method that won’t require its own complete tutorial!)
Take my word for it, using method two is far better for use in particle systems because of two major factors:
After reading this section you should now know how to comfortably keep track of and reference many particles. Remember, method one for objects that should treat their listener function differently and method two for many objects that all should be treated in exactly the same or a very similar way in their listener function.
Tip #3 Building Your Particle
The next step towards our complete particle system is building the right particle for ourselves. It might so happen that you’ll need a full MovieClip for each particle, to make use of frames and such, but for us, a MovieClip is a huge overkill. All our particle is is a placeholder for a bunch of values that need to be kept together and relate to each other. This allows us to drastically reduce the size of the class used.
The following is the basic class we can use for our particle.
package { //imports import flash.geom.Vector3D; //notice that the class extends nothing because there is no need public class Particle { //define the Vector3D objects to hold the position and velocity values private var pos:Vector3D = new Vector3D(0, 0, 0); private var vel:Vector3D = new Vector3D(0, 0, 0); public function Particle(stageRect:Rectangle) { } public function update ():void{ //update the position according to the velocity in that direction pos.x += vel.x; pos.y += vel.y; } //the getter methods that will be used to read the position of the particle public function get x ():Number{ return pos.x } public function get y ():Number{ return pos.y } } }Notice that it does not have any base class (i.e. it does not
extendanything) and therefore it is ‘born’ without properties that you might use regularly, for instance the ‘x’ and ‘y’ values. To correct this, we use build our own getter methods to read these values. These values are then passed into a Vector3D object. A Vector3D object is basically a Vector which holds three variables and an optional fourth variable. The difference is that you can reference these values as ‘x’, ‘y’, ‘z’ and ‘w’ respectively, The ‘w’, which is optional, could be used to old a rotation value for example. This makes this type of holder perfect for what we need.(We could even create these properties as public Number variables within the class directly, without using any Vector3D objects at all… but let’s stick with what we’ve got.)
But how exactly does creating our own class help? Let’s make a quick memory test to find out! Remember to save this, your document class and the Particle class in the same destination.
package { //imports import flash.sampler.getSize; import flash.display.MovieClip; public class BuildingYourParticle extends MovieClip { public function BuildingYourParticle() { //simulate 100,000 of the respective object var n:int = 100000 //define the object var p:Particle = new Particle(); var m:MovieClip = new MovieClip(); //use the getSize() method the find the memory used for n of m and p. Convert them to megabyte format var pSizeTotal:Number = (getSize(p) * n) / (1024 * 1024); var mSizeTotal:Number = (getSize(m) * n) / (1024 * 1024); //trace the respective sizes to two decimal places trace("Particle Memory: " + pSizeTotal.toFixed(2) + "mb"); trace("MovieClip Memory: " + mSizeTotal.toFixed(2) + "mb"); } } }This Outputs something like the following:
Speed Test #3 Our Particle vs. Movieclips
As you can see, there is a massive difference between the size of our class and the movieclip. Freeing up all this space allows more space on your RAM and so it allows the whole Flash Player to run quiet a bit faster. How much faster? Let’s take a look at that too! Much of this code is the same as our Array vs. Vector Speed test.
package { //imports import flash.utils.getTimer; import flash.display.MovieClip; public class ParticleSpeedTest extends MovieClip { private var n:int = 100000 private var currentTime:int = 0; //Declare the respective holders private var particleHolder:Vector.<Particle> = new Vector.<Particle>; private var movieclipHolder:Vector.<MovieClip> = new Vector.<MovieClip>; public function ParticleSpeedTest():void { //time test for writing a new particle or movieclip write(); trace("----"); //time test for reading from a particle or movieclip read(); } private function write ():void{ trace("Writing Times"); timeDifference //for n times, push a new particle into the vector for(var i:int = 0; i < n; i++){ particleHolder.push(new Particle()); } //trace the time taken trace("Particle: " + timeDifference + "ms"); //for n times push a new movieclip into the vector for(var j:int = 0; j < n; j++){ movieclipHolder.push(new MovieClip()); } //trace the time taken trace("MovieClip: " + timeDifference + "ms"); } private function read():void{ var num:int = 0; trace("Reading Times"); timeDifference //for n times, set num to the corresponding particle's 'x' value for(var i:int = 0; i < n; i++){ num = particleHolder[i].x; } //trace the time taken trace("Particle: "+ timeDifference + "ms"); //for n times, set num to the corresponding movieclip's 'x' value for(var j:int = 0; j < n; j++){ num = movieclipHolder[j].x; } //trace the time taken trace("MovieClip: " + timeDifference + "ms"); } private function get timeDifference ():int{ var totalPlayedTime:int = getTimer(); var timeDifference:int = (totalPlayedTime - currentTime); currentTime = getTimer(); return timeDifference } } }This should output something similar to the following:
As you can see from these results the real difference is in the writing times; this is because the Flash Player has to draw on more resources (the base classes of the MovieClip and each subsequent object) to complete this. In our main project this isn’t any real issue since we only need to create new Particles at the beginning but we will see an example later on when pushing new Particles in all the time becomes necessary. The difference in reading times is almost neglectable since both classes use their getters for the ‘x’ property in the same way.
After reading this section you should be comfortable with building your base class for your particle’s needs.
Tip #4 Introduction to Bitmaps
Bitmaps, and their partner in crime BitmapData, are usually some of the two most confusing steps for a beginner, mainly because what they are generally used for is higher level stuff. Here I will give a short introduction on some of the basic and most used methods regarding the Bitmap and BitmapData classes.
What are They?
In the quickest explanation possible:
Basically, the Bitmap class displays what the BitmapData class tells it to. They go hand in hand practically always.
Drawing with Bitmaps
The BitmapData class does not have a
graphicsproperty of its own, yet it remains one of the most important classes for Flash graphics! How? It draws the shapes of other classes. Let’s take a look at how to draw a simple circle using Bitmaps and BitmapData.public function SimpleCircle():void { //define the radius of the circle var radius:int = 30; //draw a circle the normal way. Notice that you do not add the shape that is to be drawn to the display list var circleShape:MovieClip = new MovieClip(); circleShape.graphics.beginFill(0x555555, 1); circleShape.graphics.drawCircle(radius, radius, radius); circleShape.graphics.endFill(); //create the bitmap and add it to the display list var bmd:BitmapData = new BitmapData(radius * 2, radius * 2, true); var bm:Bitmap = new Bitmap(bmd); stage.addChild(bm); //draw the shape bmd.draw(circleShape); }This results in a simple grey circle touching the top left corners of the stage when run. The draw() method is simply a snapshot of the movieclip at that time so in theory we could move the circleShape object around an continue to draw it to give the effect of many circles. This is how a lot of drawing within bitmaps is done.
The setPixel() Method
Because at the base of all graphics are raw pixels, this method becomes very important for creating effects using the Bitmap and BitmapData classes. It allows you to change to color of a pixel inside the BitmapData area. Heres how that’s done.
package { //imports import flash.events.Event; import flash.display.Bitmap; import flash.display.BitmapData; import flash.display.MovieClip; public class SetPixelMethod extends MovieClip { //define variables private var n:int = 50; private var w:int; private var h:int; private var bm:Bitmap private var bmd:BitmapData; public function SetPixelMethod ():void { w = stage.stageWidth; h = stage.stageHeight; //create the bitmap data the width and height of the stage that is not transparent and grey in color bmd = new BitmapData(w, h, false, 0x222222); bm = new Bitmap(bmd); addChild(bm); addEventListener(Event.ENTER_FRAME, onFrameLoop); } private function onFrameLoop (evt:Event):void { for (var i:int = 0; i < n; i++ ) { //randomly pick the x,y coordinates to set the new pixel color var px:int = Math.random() * bmd.width; var py:int = Math.random() * bmd.height; //give the pixel a random color var pc:uint = Math.random() * 0xffffff; //set the pixel at (px,py) to that color bmd.setPixel(px, py, pc); } } } }You should end up with something that looks like this, with more dots appearing on every frame:
This is the graphics style we will use for our system. Don’t worry if it looks kinda terrible right now, at the end you’ll see how we can make these look much better with a whole bunch of effects.
The lock() and unlock() methods
These methods are some of the least used but most helpful regarding bitmap. In fact I would have never known about there existence if it wasn’t for a great little site called WonderFl where members regularly boast massive particle systems, the truth is that these were the inspiration of this tutorial!
You might be hard pushed to find a similar set of methods to use together, this is how they work:
public function LockUnlockMethods ():void { //Draw a basic circle, same in steps before this var radius:int = 30; var circleShape:MovieClip = new MovieClip(); circleShape.graphics.beginFill(0x555555, 1); circleShape.graphics.drawCircle(radius, radius, radius); circleShape.graphics.endFill(); //create the bitmap/bitmapdata var bmd:BitmapData = new BitmapData(radius * 2, radius * 2, true); var bm:Bitmap = new Bitmap(bmd); stage.addChild(bm); //lock the bitmap bmd.lock(); //draw resources bmd.draw(circleShape); //unlock and update the bitmap bmd.unlock(); }In essence, you wrap the lock() and unlock() methods around the point in which your code is changing the appearance of a Bitmap. While for the situation shown above they aren’t all that useful, in a large scale system with many thousands of changes to the bitmap they speed up the process by a long shot. This is because the Bitmap and BitmapData classes like to have a lot going on at once, the more changes you can cram into a single step the better they become! These methods are great for that as they put on hold all changes made to the locked bitmap until it is unlocked, and this means it isn’t re-rendered during that time, which speeds up the process.
Clearing Your Bitmap
The BitmapData class doesn’t offer a clear cut method to create wipe its data, so here are two common ways to do so. We can reuse all the the code from learning about the setPixel method.
package { //imports import flash.geom.Point; import flash.events.Event; import flash.geom.Rectangle; import flash.display.Bitmap; import flash.display.BitmapData; import flash.display.MovieClip; import flash.filters.BlurFilter; public class ClearBitmap extends MovieClip { //define variables private var n:int = 50; private var w:int; private var h:int; private var bm:Bitmap private var bmd:BitmapData; private var clearRect:Rectangle; public function ClearBitmap ():void { w = stage.stageWidth; h = stage.stageHeight; bmd = new BitmapData(w, h, false, 0x222222); bm = new Bitmap(bmd); addChild(bm); addEventListener(Event.ENTER_FRAME, onFrameLoop); //create the bitmap data the width and height of the stage that is not transparent and grey in color clearRect = new Rectangle(0, 0, w, h); } private function onFrameLoop (evt:Event):void { //use one of these methods to clear your bitmap //bmd.fillRect(clearRect, 0x222222); bmd.applyFilter(bmd, bmd.rect, new Point(0, 0), new BlurFilter(1.1, 1.1, 2)); for (var i:int = 0; i < n; i++ ) { var px:int = Math.random() * bmd.width; var py:int = Math.random() * bmd.height; var pc:uint = Math.random() * 0xffffff; bmd.setPixel(px, py, pc); } } } }If you use the clearRect method, it simply draws a completely new grey rectangle over everything else. This isn’t as careless method as it sounds at first because remember all you are ever doing with a Bitmap is changing the color of a set of pixels; overlapping items makes no difference what so ever.
The second option blurs out the dots by merging them into the background. We will use this later to create more interesting effects. You should note that this method requires a significantly longer compute time and should be avoided if efficiency is your only concern. We will leave this until the last bit of the tutorial where we are not aiming for maximum efficiency.
Speed Test #4 Bitmap Drawing vs. MovieClips Drawing
This is our final speed test and here we will test the speed difference between drawing multiple shapes using the Bitmap classes and the MovieClip class. Here is is:
CAUTION: The regular createMovieClipCircles() method is so inefficient that you should not let it run for more than a few seconds. The Flash Player will continue to slow down until it eventually grinds to a halt.
package { //imports import flash.events.Event; import flash.display.Bitmap; import flash.utils.getTimer; import flash.display.BitmapData; import flash.display.MovieClip; public class Bitmapvs.MovieClip extends MovieClip { //define variables private var w:int; private var h:int; private var r:int = 5; private var n:int = 500; private var currentTime:int = 0; private var bm:Bitmap; private var bmd:BitmapData; private var bmShape:MovieClip = new MovieClip(); public function Bitmapvs.MovieClip ():void { w = stage.stageWidth; h = stage.stageHeight; bmd = new BitmapData(w, h, true, 0); bm = new Bitmap(bmd); addChild(bm); addEventListener(Event.ENTER_FRAME, onFrameLoop); } private function onFrameLoop (evt:Event):void { timeDifference; //use one of these functions at a time //this one is to create points using the movieclip method //createMovieClipCircles(); //this one is to create points using the bitmap method createBitmapCircles(); } private function createMovieClipCircles ():void { //this will create a new movieclip for each circle for (var i:int = 0; i < n; i ++) { var m:MovieClip = new MovieClip(); drawCircle(m); addChild(m); } //trace the fps trace(1000 / timeDifference); } private function createBitmapCircles ():void { //this will draw the same movieclip in different places over and over bmd.lock(); for (var j:int = 0; j < n; j ++) { drawCircle(bmShape); bmd.draw(bmShape); } bmd.unlock(); //trace the fps trace(1000 / timeDifference); } private function drawCircle (m:MovieClip):void { //create the same function to draw circles for both to keep it fair and organised m.graphics.clear(); m.graphics.beginFill(Math.random() * 0xffffff); m.graphics.drawCircle(Math.random() * w, Math.random() * h, r); m.graphics.endFill(); } private function get timeDifference ():int{ var totalPlayedTime:int = getTimer(); var timeDifference:int = (totalPlayedTime - currentTime); currentTime = getTimer(); return timeDifference } } }What you should find after using both methods is that:
The createMovieClipCircles method is so inefficient because it needs to add each circle to the display list which leaves the Flash Player struggling to hold the weight of them all. This is why we must use the Bitmap and BitmapData classes in our particle system.
From reading this section you should now be familiar with many of the methods we can use from the Bitmap and BitmapData classes to build our particle system. I have covered much of what we need to know to build such a system so now I think its time we dive in!
Building the System
Our system won’t be pretty, but dang it will be fast! It will be composed of two classes, the Particle class we made earlier and the controller class that keeps check of everything. Our aim is to build a system that will brush off 100k particles, laugh at 150k particles and take on 200k comfortably. Of course this depends on your system, but mine is about six years old and hasn’t blown up yet so I’m sure most of you will be okay.
First we will start with the basic Particle class, much of the code that you will see will be the same as in the steps previously described.
package { //imports - the less the better import flash.geom.Vector3D; import flash.geom.Rectangle; public class Particle { //define the position and velocity Vector3D objects private var pos:Vector3D = new Vector3D(0,0); //the velocity of the particle is between +3 and -3 for x and y private var vel:Vector3D = new Vector3D(rand(3), rand(3)); //define the bounds and default color of the particle private var bounds:Rectangle; private var color:uint = 0x555555 public function Particle(stageRect:Rectangle) { //the bounding area of the stage is passed into the constructor //we do not need to pass the entire instance of the stage as this will require more memory bounds = stageRect; //spawn the particle at a random point within the bounds pos.x = Math.random() * bounds.width; pos.y = Math.random() * bounds.height; //give a handful a different color so that we can see particles moving more easily if(Math.random() < 0.005) color = 0xFFFFFF } private function rand(n:int):Number{ //this function returns a random number between -n and n return n - (n * 2 * Math.random()) } public function update ():void{ //add the respective velocities to the position pos.x += vel.x; pos.y += vel.y; //check if the particle is outside the bounds of the rectangle checkBounds(); } private function checkBounds():void{ //this function simply checks the x,y position values and if they are //bigger or greater than the bounds reverse the respective velocity (direction) is reversed if(pos.x < 0 || pos.x > bounds.width) vel.x *= -1; if(pos.y < 0 || pos.y > bounds.height) vel.y *= -1; } //the get methods for the color and x,y values of the particle public function get c ():uint{ return color } public function get x ():Number{ return pos.x } public function get y ():Number{ return pos.y } } }In keeping with OOP traditions, our particle is as encapsulated (self-contained) as possible. It defines its own x- and y-positions to keep clutter and unneeded variables from the controller class and only needs the update() method to be called for it to be ready for the next frame.
Next is the Controller class. This class is the brains of the operation doing all the looping and drawing on each frame.
package { //imports import flash.events.Event; import flash.display.Bitmap; import flash.display.BitmapData; import flash.geom.Rectangle; import flash.utils.getTimer; import flash.display.MovieClip; public class Controller extends MovieClip { //define variables private var w:int; private var h:int; private var bm:Bitmap; private var bmd:BitmapData; private var clearRect:Rectangle; private var currentTime:int = 0; private var holder:Vector.<Particle> = new Vector.<Particle>; //most machines should be fine with 150,000 particles. Even my Nexus One can handle it! private var n:int = 150000; public function Controller():void { w = stage.stageWidth; h = stage.stageHeight; //create the blank rectangle we will use to clear the bitmapdata clearRect = new Rectangle(0, 0, w, h); //create the bitmap and bitmapdata bmd = new BitmapData(w, h, false, 0); bm = new Bitmap(bmd); addChild(bm); //populate the holder with n number of particles for(var i:int = 0; i < n; i++ ){ //notice no temporary variable was used to store the particle before pushing it to the Vector //this only uses unneeded memmory holder.push(new Particle(stage.getRect(this))); } //add listener for every frame addEventListener(Event.ENTER_FRAME, onFrameLoop); } private function onFrameLoop (evt:Event):void{ var p:Particle; //lock the bitmap and clear it before drawing bmd.lock(); bmd.fillRect(clearRect,0); //for n times get the respective particle in the holder and set the //corresponding pixel at p.x and p.y to the particles color for(var i:int = 0; i < n; i++ ){ //notice a temporary variable was used here because otherwise the object //would need to be read 3 times from the Vector - much slower p = holder[i]; bmd.setPixel(p.x, p.y, p.c); //update the particle's position p.update(); } //update the bitmap bmd.unlock(); //trace the FPS trace(1000 / timeDifference); } private function get timeDifference ():int { var totalPlayedTime:int = getTimer(); var timeDifference:int = (totalPlayedTime - currentTime); currentTime = getTimer(); return timeDifference } } }Thats it! You have what you saw in the first demo.
EPILEPSY WARNING:
Please don’t view this demo if you are likely to suffer from epileptic attacks or loss of consciousness, particularly when looking at some types of strong flashing lights, rapid succession of images, simple geometric shapes, flashes or explosions.
Unfortunately there is a problem. If you run this code inside the Flash Professional IDE it will never run at 24/24 FPS. This is because when you run it here, the Flash IDE tries to connect with Flash Player to read many different things off it, this is how you get your error reports when something goes funny. However, luckily for you, your clients probably never have to see this side of things and on its own, the Flash Player works beautifully, running easily at 24/24 FPS. Its just slightly more difficult to read the FPS. I recommend making a small dynamic text field and output what we are should be tracing to that, this is outside the scope of this tutorial and is something that is pretty straightforward so I can leave that with you.
So now that you have made your particle system, wouldn’t it be nice to show it off to your friends and clients? Coming from experience all you will get from showing this one is some weird glances with some squeezed praise on the side from all of those but seasoned programmers. Let’s make something pretty.
Over 9000?! Playing it Safe With so Many Particles.
Before moving on any further I recommend tinkering around a bit with the above particle system and see how far you can push it. On my less than average system I can go to about 200,000 at 24/24 FPS and at 250,000 its at about 18/24 FPS, just as a reference. Get a grip for how far you can push your own system and heck, even boast about it in the comments!
Let’s look at some of the things you should avoid when playing around with systems such as this.
Trace statements. One of the most useful things in a Flash Developer’s arsenal is actually a big task for Flash Player. Once per frame is okay, but make sure you don’t shove it into one of your particles when you have 200k of them running. This will simply instantly crash the Flash IDE and you’l spend the next couple of minutes pressing all the exit buttons. A good way to test something in a particle is just to drop the number of them to something between one and ten.
Everything matters when you’re doing something 200,000 times 24 times a second so be sure to keep looking through your code and never make any big changes without putting the number of particles down to a single number.
Making Something Pretty – A Basic Waterfall Effect
This will be a very basic example of building something that looks mildly attractive.
This is the updated Particle class which is used to create the waterfall:
package { import flash.geom.Vector3D; import flash.geom.Rectangle; public class Particle { private var pos:Vector3D = new Vector3D(0,0); private var vel:Vector3D = new Vector3D(rand(3), rand(3)); private var bounds:Rectangle; private var color:uint = 0x00FFFF public function Particle(stageRect:Rectangle) { bounds = stageRect; //spawn the particle from the top left corner pos.x = 0; pos.y = 0; } private function rand(n:int):Number{ //this function returns a random number between 0 and n return Math.random() * n } public function update ():void{ pos.x += vel.x; pos.y += vel.y; //add a small amount to the y velocity to simulate gravity vel.y += 0.1; //check if the particle is outside the bounds of the rectangle checkBounds(); } private function checkBounds():void{ //this time we need to decrease velocities in both directions to make sure they are all eventually removed if(pos.x < 0 || pos.x > bounds.width){ vel.x *= -0.8; vel.y *= 0.8; } if(pos.y < 0 || pos.y > bounds.height){ vel.x *= 0.9; vel.y *= -Math.random() * 0.8; } } //the get methods for the color and x,y values of the particle public function get c ():uint{ return color } public function get x ():Number{ return pos.x } public function get y ():Number{ return pos.y } //returns true if the particle does not have a lot of 'energy' left, false otherwise public function get remove ():Boolean { if(Math.abs(vel.y) + Math.abs(vel.x) < 0.1){ return true; } return false; } } }As you can see there need to be no major changes to the Particle class because it will always stay as a just a placeholder for a group of related numbers and funcions.
Next is the Controller class. Again, there is no need for any major changes. Let’s take a look:
package { //imports import flash.geom.Point; import flash.events.Event; import flash.display.Bitmap; import flash.display.BitmapData; import flash.geom.Rectangle; import flash.utils.getTimer; import flash.display.MovieClip; import flash.filters.BlurFilter; import flash.geom.ColorTransform; public class Controller extends MovieClip { //define variables private var w:int; private var h:int; private var bm:Bitmap; private var bmd:BitmapData; private var clearRect:Rectangle; private var currentTime:int = 0; private var holder:Vector.<Particle> = new Vector.<Particle>; //define the blur and color transformers private var blurFade:BlurFilter = new BlurFilter(4, 4, 1); private var colorFade:ColorTransform = new ColorTransform(0.7,0.7,0.999); //the number of particles pushed into the holder every frame private var n:int = 50; public function Controller():void { w = stage.stageWidth; h = stage.stageHeight; bmd = new BitmapData(w, h, false, 0); bm = new Bitmap(bmd); addChild(bm); addEventListener(Event.ENTER_FRAME, onFrameLoop); } private function onFrameLoop (evt:Event):void{ //push new particles in n times every frame for(var i:int = 0; i < n; i++ ){ holder.push(new Particle(stage.getRect(this))); } bmd.lock() //apply the BlurFilter which blurs the colors together and fades the particles out bmd.applyFilter(bmd, bmd.rect, new Point(0,0), blurFade); //apply the color transformation to give the particle trails a blue tint bmd.colorTransform(bmd.rect, colorFade); for(var j:int = 0; j < holder.length; j++ ){ var p:Particle = holder[j]; //check if the particle has a resonable amount of energy left through its getter method //if not remove it from the holder vector if(p.remove){ holder.splice(j,1); j--; p = null; } else{ bmd.setPixel(p.x, p.y, p.c); p.update(); } } bmd.unlock(); //trace the FPS //trace(1000 / timeDifference); } private function get timeDifference ():int { var totalPlayedTime:int = getTimer(); var timeDifference:int = (totalPlayedTime - currentTime); currentTime = getTimer(); return timeDifference } } }You should end up with something like this. If you’ve just found this, you might want to hit refresh in your browser to see the start of the waterfall to better understand how the particles move.
Needless to say that you can run and run with the basic ideas here and great some amazing effects, a lot of which pop up on WonderFl quite often, or even to create this kind of effect. (shameless self plug
) A very ‘cool’ thing to try out is to have the particles interacting with the mouse in some way, the effect can be ne beautiful when done correctly. The perlinNoise() method of the BitmapData class might also be worth mentioning here as it sometimes used in particle systems to create a flowing effect, which can also be very beautiful.
Summary
I hope after reading this that you can take away a number of things from how to get the most out of Flash Player in your code to an introduction to building particle effects. Most of all, I hope I ignited a little flame of curiosity somewhere and gave you a new set of boundaries for Flash itself. Hopefully, an ‘extreme’ particle system won’t seem too extreme anymore
It’s rare, but it happens. Sometimes you absolutely need to extend a class, and that class does not already extend
EventDispatcher. At the same time, you absolutely need your class to be anEventDispatcher. Because ActionScript 3 does not allow multiple inheritance, how do you reconcile this?In other situations, perhaps you would like to create a class that has a bunch of static methods on it, and isn’t really meant to be instantiated. You would like to be able dispatch events from this class as well, but you can extend
EventDispatcherbecause that enables instance methods, not class methods.Let’s take a look at how to achieve these goals.
Step 1: How To Do It
The solution in both cases is to instantiate, hang onto, and use an
EventDispatcherobject. That is, anew EventDispatcher()object, not necessarily any of its subclasses. In the case of needing to extend something else, you can also have your class implement theIEventDispatcherinterface.The process goes something like this:
Implement
IEventDispatcher(not for the static class).package { import flash.events.*; public class ArrayDispatcher extends Array implements IEventDispatcher { public function ArrayDispatcher() { } } }Create a new
EventDispatcherobject, and store it in a property.private var _dispatcher:EventDispatcher public function ArrayDispatcher() { _dispatcher = new EventDispatcher(); }Implement the methods defined by
IEventDispatcher, and simply wrap around the matching method on yourEventDispatcherinstance.public function addEventListener(type:String, listener:Function, useCapture:Boolean=false, priority:int=0, useWeakReference:Boolean=false):void { _dispatcher.addEventListener(type, listener, useCapture, priority, useWeakReference); } public function dispatchEvent(event:Event):Boolean { return _dispatcher.dispatchEvent(event); } public function hasEventListener(type:String):Boolean { return _dispatcher.hasEventListener(type); } public function removeEventListener(type:String, listener:Function, useCapture:Boolean = false):void { _dispatcher.removeEventListener(type, listener, useCapture); } public function willTrigger(type:String):Boolean { return _dispatcher.willTrigger(type); }Step 2: A Static
EventDispatcherFor reference, implementing this in a static class might look like this:
package { import flash.events.*; public class StaticDispatcher { private static var _dispatcher:EventDispatcher = new EventDispatcher(); public static function addEventListener(type:String, listener:Function, useCapture:Boolean=false, priority:int=0, useWeakReference:Boolean=false):void { _dispatcher.addEventListener(type, listener, useCapture, priority, useWeakReference); } public static function dispatchEvent(event:Event):Boolean { return _dispatcher.dispatchEvent(event); } public static function hasEventListener(type:String):Boolean { return _dispatcher.hasEventListener(type); } public static function removeEventListener(type:String, listener:Function, useCapture:Boolean = false):void { _dispatcher.removeEventListener(type, listener, useCapture); } public static function willTrigger(type:String):Boolean { return _dispatcher.willTrigger(type); } } }Note that there is no
extendsorimplements, all members are nowstatic, and the_dispatcherproperty is now created directly on the property, instead of in the constructor (because there is no constructor).That’s All
Although quick to explain, this is definitely an advanced technique, and you probably won’t require it if you’re at a point where dispatching your own events is still a new concept. But file this away somewhere in your mind so you can come back to this example when you need it.
We’ve looked previously at adding our own tools to Unity’s editor; now, in this short tutorial, I’ll introduce you to handling the assets by script in Unity. We’ll manage paths, create prefab files, generate a texture and save it to an image. Finally we’ll also create a material file that uses the generated image, and all this will be done by code.
Final Result Preview
Let’s take a look at the final result we will be working towards:
Step 1: Set Up the Project
Create an empty project; we won’t be using anything fancy here so we shouldn’t bother to import anything at all. Once that’s done, create an editor script. Unity will let us use its editor classes only if we place our script in a folder named Editor. Since that doesn’t exist in our project yet, we need to create it.
Now let’s create a script inside it.
Step 2: Add a MenuItem
Let’s clean up our script. Aside from the basic functionality, we also want to be able to use the editor classes. We need to be
using UnityEditorand our script’s class should extend theEditorclass instead ofMonoBehaviourlike normal game objects do.using UnityEngine; using System.Collections; using UnityEditor; public class Examples : Editor { }In our first function we’ll be working with prefabs, let’s call it a
PrefabRoutine.public class Examples : Editor { void PrefabRoutine() { } }To easly execute this function from the editor, let’s add it as a
MenuItem.public class Examples : Editor { [MenuItem ("Examples/Prefab Routine")] void PrefabRoutine() { } }Aside from letting the unity know that we want this function to be executable from the Examples->Prefab Routine”, we also need to make this function static.
public class Examples : Editor { [MenuItem ("Examples/Prefab Routine")] static void PrefabRoutine() { } }If you go back to the editor now (and refresh the menu), you’ll notice that there’s a new menu named Examples there.
If you select the Prefab Routine nothing will happen since our function is empty.
Step 3: Create a Folder
To shape our project the way we want we need to know how to create folders so we can move stuff around. Creating a folder from the script is very straightforward, all we need to do is to let unity know where the folder should be placed. To create a folder we need to use
AssetDatabaseclass.[MenuItem ("Examples/Prefab Routine")] static void PrefabRoutine() { AssetDatabase.CreateFolder("Assets", "Prefab Folder"); }“Assets” is the name of the parent folder of the directory we want to create. In our case it’s the main project folder where all our assets are imported/created.
Note that you can also use the .NET
Directoryclass. This will also let you delete, move or access the directories’ files. To use this class you need to beusing System.IO.Each time you select the Prefab Routine from the editor, a new folder should be created and be visible in the project view.
Step 4: Create a Prefab
To create a prefab we need to call
EditorUtility.CreateEmptyPrefab(). The function takes the prefab’s path as an argument.[MenuItem ("Examples/Prefab Routine")] static void PrefabRoutine() { AssetDatabase.CreateFolder("Assets", "Prefab Folder"); Object prefab = EditorUtility.CreateEmptyPrefab("Assets/Prefab Folder/obj.prefab"); }Don’t forget about the extension! Also, after we create the file we need to call
AssetDatabase.Refresh(), so the unity is able to see it.[MenuItem ("Examples/Prefab Routine")] static void PrefabRoutine() { AssetDatabase.CreateFolder("Assets", "Prefab Folder"); Object prefab = EditorUtility.CreateEmptyPrefab("Assets/Prefab Folder/obj.prefab"); AssetDatabase.Refresh(); }If we leave a constant path as an argument, each time we select our routine a new empty prefab will replace the old one. Let’s assign each prefab to separate folder to counter that. To do this we need to save the most recently created folder to a string so we can use it as a path argument later. The
CreateFolderfunction returns aGUID, which basically is the file’s (or directory’s) ID. There’s a function that retrieves the path if we submit this ID. It’s calledGUIDToAssetPath; let’s use it to get our folder’s path.[MenuItem ("Examples/Prefab Routine")] static void PrefabRoutine() { string path = AssetDatabase.GUIDToAssetPath(AssetDatabase.CreateFolder("Assets", "Prefab Folder")); Object prefab = EditorUtility.CreateEmptyPrefab("Assets/Prefab Folder/obj.prefab"); AssetDatabase.Refresh(); }Now let’s use the
pathto direct the prefabs we are going to create to the most recently created folder.[MenuItem ("Examples/Prefab Routine")] static void PrefabRoutine() { string path = AssetDatabase.GUIDToAssetPath(AssetDatabase.CreateFolder("Assets", "Prefab Folder")); Object prefab = EditorUtility.CreateEmptyPrefab(path + "/obj.prefab"); AssetDatabase.Refresh(); }You can test whether the created empty prefabs are packed in folders now.
Step 5: Set the Prefab
If you create a prefab then you probably don’t want to leave it empty because in that case it’s pretty much useless. Let’s set our prefab if there’s any game object selected while our routine is executing. We’ll the prefab to the selected object. To get the currently selected object we can use the
Selectionclass which has a reference to it. To set the prefab we need to callReplacePrefab().[MenuItem ("Examples/Prefab Routine")] static void PrefabRoutine() { string path = AssetDatabase.GUIDToAssetPath(AssetDatabase.CreateFolder("Assets", "Prefab Folder")); Object prefab = EditorUtility.CreateEmptyPrefab(path + "/obj.prefab"); AssetDatabase.Refresh(); if (Selection.activeObject) EditorUtility.ReplacePrefab(Selection.activeGameObject, prefab); }If you run the routine with any game object selected now then you’ll notice that the created prefab is automatically set.
That’s it, we have created a custom routine for prefab creation, it’s not very useful but you should be able to know how to do that now if there will be a need for such a thing in your project.
At the end I also want to mention that
AssetDatabasealso lets you move assets around, move them to trash or delete them by callingAssetDatabase.MoveAsset(), AssetDatabase.MoveAssetToTrash()andAssetDatabase.DeleteAsset()respectively. The rest of the functionality can be found at theAssetDatabasescript reference page.Step 6: Add Another Menu Item
Let’s go to another example, this time we’ll create a texture and a material programmatically. Let’s call this menu item Material Routine.
[MenuItem ("Examples/Prefab Routine")] static void PrefabRoutine() { string path = AssetDatabase.GUIDToAssetPath(AssetDatabase.CreateFolder("Assets", "Prefab Folder")); Object prefab = EditorUtility.CreateEmptyPrefab(path + "/obj.prefab"); AssetDatabase.Refresh(); if (Selection.activeObject) EditorUtility.ReplacePrefab(Selection.activeGameObject, prefab); } [MenuItem ("Examples/Material Routine")] static void MaterialRoutine() { }Now we have two items to choose from in the Examples menu.
Step 7: Create a Texture
Let’s create a
Texture2Dand set its size to(256, 256)for this example.[MenuItem ("Examples/Material Routine")] static void MaterialRoutine() { Texture2D tex = new Texture2D(256, 256); }Now we shouldn’t let all those pixels go to waste, so let’s set the texture’s pixels according to some kind of thought-up formula. For that we’ll need two
forloops to go through every pixel. To set the each pixel’s color we need to callSetPixel()which takes the position of the pixel on a texture and its color as the arguments.[MenuItem ("Examples/Material Routine")] static void MaterialRoutine() { Texture2D tex = new Texture2D(256, 256); for (int y = 0; y < 256; ++y) { for (int x = 0; x < 256; ++x) tex.SetPixel(x, y, new Color()); } }To assign the color we’ll use the
Mathf.Sin()function. TheColorclass can be initialized with three floats, corresponding to the red, green and blue color components, respectively. The max allowed value is1and min is0, so theSin()function suits our needs perfectly.for (int y = 0; y < 256; ++y) { for (int x = 0; x < 256; ++x) tex.SetPixel(Mathf.Sin(x*y), Mathf.Sin(x*y), Mathf.Sin(x*y))); }It doesn’t matter what we submit to the
Sin()function, but to get something more interesting we should give a value that changes for each pixel.Step 8: Create an Image
Now let’s create an image from the texture we just created. Since we’ll be writing to a file in binary mode, we need to be
using System.IO, so let’s add it to the top of our script.To save our texture as a PNG image we first need to call
EncodeToPNG()which will return an array of bytes that the PNG file consists of.for (int y = 0; y < 256; ++y) { for (int x = 0; x < 256; ++x) tex.SetPixel(x, y, new Color(Mathf.Sin(x*y), Mathf.Sin(x*y), Mathf.Sin(x*y))); } byte[] pngData = tex.EncodeToPNG();Now that we’ve got our
pngDatawe can write it to a file and create a PNG image in this way.byte[] pngData = tex.EncodeToPNG(); if(pngData != null) File.WriteAllBytes("Assets/texture.png", pngData);Since we create the file at a constant path, each time we’ll run
MaterialRoutine(), the texture will get overwritten.And since we’ve got our image, we don’t need the generated texture anymore as it won’t be referencing an image anyway. Let’s destroy it.
byte[] pngData = tex.EncodeToPNG(); if(pngData != null) File.WriteAllBytes("Assets/texture.png", pngData); DestroyImmediate(tex);Also, we need to let Unity update the project view and file references; to do that we need to call
AssetDatabase.Refresh().byte[] pngData = tex.EncodeToPNG(); if(pngData != null) File.WriteAllBytes("Assets/texture.png", pngData); DestroyImmediate(tex); AssetDatabase.Refresh();Let’s test whether the texture gets created when we execute our routine.
Step 9: Create a Material
We’ve got an image and now we can create a material that uses it as a texture. Let’s create a
new Material.AssetDatabase.Refresh(); new Material(Shader.Find("Diffuse"));The created material will use a Diffuse shader. To save this material to the file, we can call
AssetDatabase.CreateAsset(). This function takes an asset as the first argument, and the path as the second one.AssetDatabase.Refresh(); AssetDatabase.CreateAsset(new Material(Shader.Find("Diffuse")), "Assets/New Material.mat");If you run our routine now, you’ll see that the material is created.
As you can see everything is correct, its name is New Material and it uses Diffuse shader, but there’s no texture assigned to it.
Step 10: Assign the Texture
First we need to get a reference to the material we just created. We can get that by calling
AssetDatabase.LoadAssetAtPath()which loads the asset and returns its reference.AssetDatabase.CreateAsset(new Material(Shader.Find("Diffuse")), "Assets/New Material.mat"); Material material = (Material) (AssetDatabase.LoadAssetAtPath("Assets/New Material.mat",typeof(Material)));Now let’s assign our generated texture as the main texture of the material. We can get the texture reference of the generated texture in the same way we got the material reference.
Material material = (Material) (AssetDatabase.LoadAssetAtPath("Assets/New Material.mat",typeof(Material))); material.mainTexture = (Texture2D) (AssetDatabase.LoadAssetAtPath("Assets/texture.png", typeof(Texture2D)));To see the results, run the Material Routine.
As you can see, the material has the texture assigned now.
Conclusion
That’s the end of the introduction to manage your assets using scripts. If you want to expand your knowladge on the topic you can visit the Unity Editor Classes reference page, particularly the AssetDatabase script reference is worth looking into. If you need to work at a low level, you should also read the docs on System.IO to get more information on its classes and how you can use them. Thanks for your time!
In the previous video I showed you how to implement basic playback controls. Today I am going to talk about using labels to mark and navigate to precise locations in a TimelineLite. Labels in TimelineLite work similarly to how frame labels work in Flash IDE timelines. I’ll be showing you multiple ways to add labels and some clever ways of using them. We’ll also take a little look at some features exclusive to TimelineMax.
TimelineLite in Action
Let’s take a look at the example we’ll be building in the video:
You can find all the files used to create the SWF above in the source files for this tutorial.
Watch the Screencast
Don’t like ads? Download the screencast, or subscribe to Activetuts+ screencasts via iTunes!
Adding Labels to a TimelineLite
There are two methods that you can use for adding labels to a TimelineLite
addLabel(label:String, time:Number):voidAdds a label at a particular time. It is most common to pass in the current duration of the timeline as the time.
tl.append( TweenMax.to( align_mc, 1, { x:endX } ) ); tl.append( TweenMax.to( align_mc, .2, { autoAlpha:0 } ) ); // add a label named transform immediately after the previous tween is finished. tl.addLabel("transform", tl.duration) tl.append( TweenMax.to( transform_mc, 1, { y:endY } ) );insert(tween:TweenCore, timeOrLabel:* = 0):TweenCoreWhen using
insert()to insert a tween, the tween will be inserted at the time or label specified in the second parameter. If you insert at a label that doesn’t exist yet, it will automatically place that label at the end of the timeline and then insert the tween. This technique makesinsert()act like anappend()with the added value of creating a label.tl.append( TweenMax.to( align_mc, 1, { x:endX } ) ); tl.append( TweenMax.to( align_mc, .2, { autoAlpha:0 } ) ); //insert a tween and the transform label immediately after the previous tween is finished. tl.insert( TweenMax.to( transform_mc, 1, { y:endY } ), "transform" );Navigating to Labels
TimelineLite’s intuitive
gotoAndPlay()andgotoAndStop()methods work exactly as those same methods of the MovieClip object. Although this video focuses on using gotoAndPlay with a label, you can also pass in a time as well.//jump to the color label and play tl.gotoAndPlay("color"); //jump 1 second into the timeline and stop tl.gotoAndStop(1);TimelineMax gives us the unique ability to play to a particular label with the
tweenTo()method. If MovieClips had such a method it would be calledplayTo(). At the end of this series I will be showing you how to add an ease to atweenTo()as well as a number of other tricks.Due to the introductory nature of this series there are some label-related features of TimelineLite/Max that I did not get to cover. Advanced users may want to read up on the optional
suppressEventsparameter that can be used withgotoAndPlay()andgotoAndStop()in the documentation.TimelineMax’s Label Helpers
TimelineMax has a number of features for figuring out the names of labels based on their relation to the current position of the playhead or a specified time. These properties and methods make it possible to dynamically calculate what the nearest label is in any direction.
Property
currentLabel– The closest label that is at or before the current time.Methods
getLabelBefore(time:Number)– Returns the previous label (if any) that occurs before the time parameter. If you do not pass a time in, the currentTime will be used.getLabelAfter(time:Number)– Returns the next label (if any) that occurs AFTER the time parameter. If you do not pass a time in, thecurrentTimewill be used.Conclusion
Due to the powerful properties and methods of TimelineLite/Max it is extremely easy to navigate and control your script-based timelines. The label-related features that we have discussed today really just scratch the surface of what can be done. Once you get a handle on these basic techniques you will find yourself creating timelines with more and more dynamic features. Suppose you want to prevent a user from clicking the “library” button once they are in the library section. You could simply add logic to the button’s click handler that considers the following:
Feel free to convert that to ActionScript if you would like some extra credit
In the next tutorial I am going to be showing advanced techniques for adding tons of tweens to a timeline with very little code and extreme precision.
If you have any questions or comments on this tutorial simply post a comment below.
Thanks for watching!
The shell game is a cliché of street corners in black and white movies and modern cities: the hustler puts a pea under one of three shells, and swaps the shells around rapidly, challenging you to pick the shell with the pea underneath. The punter will typically get it correct… right up to the point where big money is at stake, or when the punter isn’t one of the hustler’s cronies.
In this tutorial, exclusive to Premium members, you’ll learn how to create your own version of the shell game – except without the cheating!
Preview
Let’s take a look at the final result we will be working towards:
The tutorial covers both the design and the coding of the game, and uses TweenMax to make the shells move along a curved path.
Active Premium Membership
We run a Premium membership system which periodically gives members access to extra tutorials, like this one! You’ll also get access to Psd Premium, Vector Premium, Audio Premium, Net Premium, Ae Premium, Cg Premium, Photo Premium, and the new Mobile Premium too. If you’re a Premium member, you can log in and download the tutorial. If you’re not a member, you can of course join today!
Also, don’t forget to follow @envatoactive on twitter and grab the Activetuts+ RSS Feed to stay up to date with the latest tutorials and articles.
We’re excited to let you know that now, in addition to Twitter and Facebook, you can get involved with the Activetuts+ community over at Google+! We’ll be using Google+ to let you know about our latest tutorials, competitions, and Tuts+ news. Read on to find out more…
What to Expect on Google+
Through Google+, we’ll be publishing links to our new tutorials and articles, industry news, graphics and examples from our community, and lots more! It’s going to be an extension of the Activetuts+ site and community, in the same way we treat Twitter and Facebook.
Don’t have a Google+ account? You can head over and create one here, or find out a little more about how it works.
Add Activetuts+ to Your Circles
Just use the button above to add Activetuts+ to your circles, so you don’t miss out on any of our new content. We look forward to seeing you on Google+!
It’s that time of month again! If you’re a fan of the Activetuts+ Facebook page, you can now access a new bonus tutorial. In this month’s Facebook Fan Bonus, you’ll learn how to create a dynamic “Accordion” menu.
Final Result Preview
Here’s a look at the type of menu you’ll learn to build in the tutorial:
Obviously, in your own game, you’ll add other elements to the menu’s different screens.
As Tyler Seitz, the author, describes it:
Download This Fan Bonus Now!
All you have to do is Like us…
Not On Facebook?
Don’t worry, the tutorial will be posted on Activetuts+ in a month’s time!
Today, you will learn how to remove the background color from a sprite sheet using AS3, and blit the result to a bitmap canvas. Read on to learn more!
Final Result Preview
Let’s take a look at the final result we will be working towards:
Step 1: Drawing the Spritesheet
So, it is time to draw your spritesheet. Open up your favourite ‘pixel-art’ program and create an image of 128×128 and give it a background colour of ‘#e731f2′ which is a nice purple colour!
This is my amazing artwork:
Save your image somewhere organised and let us continue!
Step 2: Importing the Sprite Sheet
Now, I’m call this a sprite sheet even though it is just one image. A ‘sprite sheet’ usually consists of more than one sprite but we can imagine we have more, right?
Anyway, if you are using Flash CS4 or higher, simply import your image via File | Import | Import to Library:
If you are using any other AS3 IDE, I have included the SWC file so you should probably skip this step. If you wish to embed your own images, I’m sure that your IDE of choice will have this feature.
Step 3: Exporting the Sprite Sheet
We have now got our sprite sheet in the Library; we should really make it into a
Class.Right-click the image in the library and select ‘Properties’. Give the image the following properties:
Hit OK. If you get a warning, just ignore it; it does not matter here.
Step 4: Creating the Document Class
If you’re not familiar with the concept of a document class, check out this Quick Tip before reading further.
Create a new ‘ActionScript 3.0 Class’ and give it the name ‘Main’. When the file has been created, save it as ‘Main.as’.
This code should be placed in our new Class:
package { import flash.display.MovieClip; public class Main extends MovieClip { public function Main() { // constructor code } } }We are not done yet, however! If you are using the Flash IDE, navigate to the ‘Properties Panel’ and set the ‘Document Class’ to ‘Main’. If you are wondering what that does, it means that when your application/game is run by the Flash Player,
Main.aswill be the class that’s linked to the SWF itself. Cool, huh?Run the program; if you get no errors then you should be good to go!
Step 5: Creating the Canvas
Before we do any blitting, we will first need to make a canvas to blit onto. If you are unsure of the term Blitting or would like to learn more about it, please take a look at this tutorial.
Now, we will declare a new Bitmap variable, to which we will blit (copy) the image.
After we have done this, we will add a
functioncalledInitialize()which will allow us to set everything up neatly:public function Main() { Initialize(); }Let us create the function now:
private function Initialize():void { canvas = new Bitmap( new BitmapData( 550, 400, false, 0x000000 ) ); //Sets the Canvas to Black. stage.addChild( canvas ); //Adds the canvas to the stage. }We are still not finished however, as we still have to add the
imports:Run the program; if it has a black background, it worked!
Step 6: Initializing the SpriteSheet
Firstly, we will need to make a new variable of type
SpriteSheet– which was the Class for the image we imported earlier, remember?We shall then initialize it:
private function Initialize():void { canvas = new Bitmap( new BitmapData( 550, 400, false, 0x000000 ) ); //Sets the Canvas to Black. spriteSheet = new SpriteSheet(); //Sets spriteSheet to hold an instance of the image that we made. stage.addChild( canvas ); //Adds the canvas to the stage. }Run the program and you should see nothing; let’s fix that right away!
Step 7: Updating the Program
Now we need to add an
ENTER_FRAMEevent. This will allow the program to update 24 times a second (24 FPS) in our case.In the
Main()function, add the following line:public function Main() { Initialize(); stage.addEventListener( Event.ENTER_FRAME, Update ); }Now we need to make the
Update()function. Add this function after the other functions:private function Update(e:Event):void { }Don’t forget the
imports:Now we are ready to do some blitting!
Step 8: Blitting
Here comes the interesting part!
Alright, so what we want to do is:
In the update function, type the following code:
private function Update(e:Event):void { canvas.bitmapData.lock(); canvas.bitmapData.fillRect( new Rectangle( 0,0,stage.width, stage.height ), 0x000000 ); canvas.bitmapData.copyPixels( spriteSheet, new Rectangle( 0,0,128,128 ), new Point( 100, 100 ) ); canvas.bitmapData.unlock(); }If you run this, you will get your image on the canvas! However, this is not just what we are aiming for as we wish to remove that background colour from the image.
I shall explain some of the code above first:
canvas.bitmapData.lock();– This line optimizes the blitting and it is a good habit to type it most of the time!canvas.bitmapData.fillRect();– This line clears the canvas by filling it with a Black colour.canvas.bitmapData.copyPixels();– Not very useful in our situation but copies all the pixels from part of an image.canvas.bitmapData.unlock();– This works withlock()to optimize the process.Now you should have this on the screen…
Yes, I know, you are probably right. I think we should get rid of the purple too…
Step 9: Removing the Colour
Finally, it’s time to remove the purple colour!
What we want to do is check through every pixel; if the pixel is purple, we simply do not copy it to the canvas. To do this, we will make our own function.
Change
Update()to the following:private function Update(e:Event):void { canvas.bitmapData.lock(); canvas.bitmapData.fillRect( new Rectangle( 0,0,stage.width, stage.height ), 0x000000 ); CustomBlitting( spriteSheet, new Rectangle( 0,0,128,128 ), new Point( 100, 100 ), 0xE730F2 ); canvas.bitmapData.unlock(); }Our new function (
CustomBlitting(), which we have not written yet) takes most of the parameters that copyPixels does, along with an extra one: the colour we wish to remove.Time to write the function. This code may look complicated if you have never done a
nested for-loopbefore. The way this loop works is basically:private function CustomBlitting( src:BitmapData, srcRect:Rectangle, destPoint:Point, color:uint ):void { for( var i:int = 0; i < srcRect.height; i++ ) { for( var j:int = 0; j < srcRect.width; j++ ) { var currentPixel:uint = src.getPixel( srcRect.x + j, srcRect.y + i ); if( currentPixel != color ) { canvas.bitmapData.setPixel( destPoint.x + j, destPoint.y + i, currentPixel ); } } } }Let me explain the getPixel and setPixel, although they should probably be self-explanatory:
getPixel( x, y );– This returns the colour of a pixel at the X,Y location.setPixel( x, y, color );– This sets the colour of a pixel tocolorat the X,Y location of the canvas.Now if you run the program, it works!
Step 10: Challenges
I only have one challenge for you to do for this tutorial:
Accept an Array of colours as a parameter and remove any colours from the image that are in the array.
Good luck!
Conclusion
I hope you have enjoyed this tutorial and have learnt something new today. If you’d like to show me your SWF with the completed challenges, leave a comment below!
The Starling Framework is an AS3 API that mimics the display list, with one crucial difference: it uses Flash Player 11′s new features to render all content by the GPU. In this tutorial, you will learn to add multiple animations to a sprite using the Starling Framework. It assumes a basic understanding of using spritesheets with Starling.
Final Result Preview
Click here to view the demo we’ll be working towards. Click left or right of the monkey to make it walk in that direction; notice how it displays a walking animation when moving and a static frame when standing still.
Initial Code
The entire demo’s source files (in both the initial and final states) are in the source download. However, we’ll mainly be working with one file,
MonkeySprite.as, so here are the contents, for reference:package { import flash.utils.getTimer; import starling.animation.Juggler; import starling.core.Starling; import starling.display.MovieClip; import starling.display.Sprite; import starling.events.Event; import starling.textures.Texture; import starling.textures.TextureAtlas; public class MonkeySprite extends Sprite { private var standMovie:MovieClip; // standing animation private var mouseX:Number = -1; // location of mouse click on x axis private var lastTime:int; // last onFrame movement private var movieVector:Vector.<MovieClip>; public function MonkeySprite() { var atlas:TextureAtlas = Assets.getTextureAtlas(); var standFrames:Vector.<Texture> = atlas.getTextures("monkey_1"); standMovie = new MovieClip(standFrames, 7 ); standMovie.loop = true; addChild(standMovie); pivotX = this.width * 0.5; this.addEventListener(Event.ENTER_FRAME, onFrame); } public function onFrame(e:Event):void { if(mouseX == -1) return; // snap if(this.x <= mouseX+5 && this.x >= mouseX-5) { this.x = mouseX; } else { var timeDiff:int = getTimer()-lastTime; lastTime += timeDiff; if(mouseX > this.x) { this.x += timeDiff*.15; } else { this.x -= timeDiff*.15; } } } public function moveToPoint(pointX:Number):void { mouseX = pointX; lastTime = getTimer(); } } }Watch the Screencast
Don’t like ads? Download the screencast, or subscribe to Activetuts+ screencasts via iTunes!
Here are the URLs mentioned in the video:
Want More Starling Tutorials?
Let us know in the comments!