Page 1 of 2 pages    Next Page Browse by category: General, Tutorials 01. HOLIDAY Posted on: 25th July 2008 Hey, I was hoping to have posted another tutorial by now but unfortunately I haven't had the time to stick together any tutorials until now. But now that I do I'm going away tomorrow for approximately. I will try my hardest however to pump out a tutorial in a few hours when I've sorted everything else out. Also I am going to make a topic on a few sites afterwards and try and get some more hits. It would be greatly appreciated if you could also help spread the word. If you want to request a tutorial then do so here. -UnknownFury 1 COMMENTS 02. AS2: DESTRUCTABLE TERRAIN Posted on: 14th July 2008 Basically, in this tutorial I'm going to teach you about bitmapdata and how to build an engine with destructable terrain. Here is what our finished product will look like. Alright, so first off I'm going to draw my terrain. It doesn't have to be anything special, we can change it later if you wish. Once you've drawn your terrain select it all and convert it to a movieclip. Then give it an instance name of ground. Here is mine: What we're now going to do is make a new movieclip, with the same image as ground but using bitmapData. To do this we're going to use the following code. Make sure you put it in the main timeline. 1. 2. 3. 4. 5. 6. 7. 8. 9. 10. 11. 12. 13. 14. 15. 16. import flash.display.BitmapData; import flash.geom.ColorTransform; import flash.geom.Matrix; var myCT:ColorTransform = new ColorTransform(1, 1, 1, 1, 0, 0, 0, 0); var levelBitmap:BitmapData = new BitmapData(550, 400, true, 0x00000000); var m:Matrix = new Matrix(); m.translate(ground._x, ground._y); levelBitmap.draw(ground, m); ground.swapDepths(_root.getNextHighestDepth()); removeMovieClip(ground); createEmptyMovieClip("levelBitmapMC", _root.getNextHighestDepth()); levelBitmapMC.attachBitmap(levelBitmap, 1); Okay, the explaination... Lines 1-3 - These first 3 lines simply import the necessary classes to use the bitmap data. The first one loads the BitmapData class, the second ColourTransformations and the final allows us to use matrices. All of these are import for what we are going to do. If you do not import these you will get compiler errors. Line 5 - This sets up our colour transformation variable which we will be using later on when making the terrain destructable. I'm not going to go into detail as to exactly what this does so if you want to read further into simply Click here. Line 7 - This line creates our new bitmapData object. We give it 4 properties which are width, height, transparent, fill colour. In this instance we have set the width and height to the size of the stage. Then we have transparency to true so that it is by default blank. We then fill it with black. You can do other colours, but its easier to fill it with black as default and then work from there. Line 9 - This creates a new matrix with the name m. We're going to use this matrix to position our ground movieclip correctly. Line 10 - This actually gives a value to the matrix we created. We want it to be in the same position as our ground movieclip so we give it the same coordinates. If you want to see this actually working use something like ground._x-100 and notice how our new bitmapdata image is moved 100pixels left. Line 11 - Here we actually add something to our levelBitmap variable we created. We do this using the draw function. It has 2 parameters which we are using, being source, matrix. Our source is ground, as we want to apply this image to our bitmapdata and our matrix is m as this makes sure it is positioned correctly. Lines 12 - 13 - Here we swap the depths of ground and then remove it. The reason we swap it first is because you have to give an MC a depth before you can remove it using removeMovieClip. The reason we are removing it is beacuse we have extracted the shape and applied it to our bitmapData so we no longer have a need for ground. Lines 15-16 - What we do here is firstly create a new movieclip and then attach our bitmapData into the movieClip. This is what makes it actually show up. We don't attach the bitmapData straight to _root however, as its easy to manipulate when its inside a movieclip as we can give it actions etc. We now have our bitmapData created. If you hit ctrl + enter you'll notice it looks identical to how it was before. Although, it looks identical we have a new movieclip with bitmapData in. If you play around with the matrix among other things then you'll probably see this as it will move around. Now what we're going to do is create a movieclip called hole. Mine is a circle 10pixels in diameter however, you can make it whatever size you fancy. Make sure it has the instance name of ground. Then in the main timeline underneath our current code add this: 1. 2. 3. 4. 5. _root.onMouseDown = function(){ var pos:Matrix = new Matrix(); pos.translate(_xmouse, _ymouse); levelBitmap.draw("hole", pos, _myCT, "erase"); } Line 1 - Self-explanatory and you should know it if you're reading this tutorial so I'm not going to explain it at all. line 2 - Like earlier, this creates a matrix. This one is called pos and we're going to use it to position the hole we're going to create in the terrain. Line 3 - Again we've seen a line similar to this before except this time our matrix is telling it to move to the position of the mouse instead. Line 4 - This line does the actual deleting. Like we did earlier, we're using the draw function. But this time we're using it in a slightly different way. This time we have included 2 extra parameters. The first new one is our colorTransform variable. Like I said earlier though, I'm not going to go into this. The next parameter I have added is erase. This, as the name says, erases from the bitmapData as opposed to adding to it. This generates our hole. So thats it. Here is the final product. Obviously, how it is, it doesn't make much of a game but with a few adjustments you can easily change it into a full blown game. Maybe something like worms? Its up to you. I was considering taking the tutorial further and making something like that but I decided I'd seperate the men from the boys by letting you work that out for yourselves. However, if you're having any troubles feel free to reply to this post with a comment and I'll get back to you with a fix. Source code. - UnknownFury 7 COMMENTS 03. CURRENT PROJECTS Posted on: 7th July 2008 Hey guys, Just an update on all the stuff I'm working on. Currently I'm writing up some tutorials for the site, right this second. This shouldn't take too long and isn't really a major project of mine. The second thing I'm doing is adding stuff to the site and finishing it off. The next thing I'm going to do is allow users to format their comments so they have more control. If you can think of other stuff around the site that needs doing then please, say so. Thirdly, I'm working on some flash games. Mainly a "mining" game that I'm working on with Lochie. This is pretty much done and I'm just tweaking it now. The beta version will be released fairly soon for testing. Next up, php game. This isn't something I've really started yet but some of you might remember "Battleforge". This is what I'm hoping to recreate yet bigger and better. Finally, I'm experimenting with openGL and C++ to see what I can do. So far I have created some fairly cool stuff like a terrain generator which was fun to do. I'm also experimenting with sandy3D for 3D in flash. All I can say is, thank god its summer - UnknownFury 0 COMMENTS 04. AS2: CIRCLE ON CIRCLE COLLISIONS Posted on: 28th June 2008 The other day, I was thinking about what sort of stuff I found hard when I was first starting to learn AS2. A number of things came up but one that supprised me, circle on circle collisions. This supprised me simply because its such an easy thing to do when you know how. I think the reason I had trouble with it was mostly because there wasn't very much documentation on it, so I've decided to write a tutorial for those who want to know how. For the sake of this tutorial we're going to use two balls moving towards each other. First things first, create a circle of around 30pixels diameter and convert it to a MC. Make sure that the registration point is centered. Then press the advanced button and tick "Export for actionscript". Call it ball. Click OK. Now delete the ball off of the stage, but leave it in the libary, and we're ready to go. Crank your FPS up to around 30 and we'll get started. All this code will go in the frames code - not an MCs. 1. 2. 3. 4. 5. 6. 7. 8. 9. 10. 11. 12. 13. 14. 15. 16. 17. 18. 19. 20. 21. 22. 23. 24. 25. 26. 27. 28. 29. 30. 31. 32. 33. 34. 35. 36. 37. 38. attachMovie("ball", "b1", _root.getNextHighestDepth()); b1._x = 100; b1._y = 250; b1.vx = 5; b1.vy = -5; attachMovie("ball", "b2", _root.getNextHighestDepth()); b2._x = 420; b2._y = 250; b2.vx = -5; b2.vy = -5; var rads:Number = b1._width; b1.onEnterFrame = function(){ this._x += this.vx; this._y += this.vy; dx = b2._x-this._x; dy = b2._y-this._y; dx2 = this._x-b2._x; dy2 = this._y-b2._y; dis = Math.sqrt(dx*dx+dy*dy); ang = Math.atan2(dy, dx); ang2 = Math.atan2(dy2, dx2); if (dis < rads) { this.vx -= Math.cos(ang)*2; this.vy -= Math.sin(ang)*2; b2.vx -= Math.cos(ang2)*2; b2.vy -= Math.sin(ang2)*2; } } b2.onEnterFrame = function(){ this._x += this.vx; this._y += this.vy; } Thats all there is too it. Alot of the code will need to be tweaked slightly but for this basic example of how to do the collisions we're ignoring stuff like the mass of the balls just to show you how its done. Lines 1-11 aren't really much to do with the script, they just set up the 2 balls in poistion and give them an x and y velocity. You could alternativly just place them directly onto the stage and do this within the movieclips themselves. Line 13 defines the radii of the 2 balls put together. To get a single radius we would do b1._width/2 but we then multiply it to get the 2 so we simply do b1._width;. Line 15 is just the clipevent handler. 16-17 simply tell b1 to move according to its x and y velocity. 35-38 do this again for b2. Lines 19 and 20 calculate the x and y distance between the 2 balls from the perspective of the second ball. We then repeat this but subtract b2 from b1 instead. This is important for calculating the angle the ball will bounce off at correctly at the end. Line 23 is a bit of pythagorus' theorm. I'm not going to go through it as you should understand whats going on here but it calculates the distance the 2 balls are apart - important for the hitTesting. The next 2 lines do what I said earlier - calculate the 2 different angles. The first 1 is for b1 and the second for b2. This is done using trigonometry, the Math.atan2 function specifically (slightly different to the usual tan function). If you're not sure on trigonmeetry do not worry too much as this isn't the most important thing in the world at this stage. The next line is our most important. The idea of the tutorial was to do ball on ball collisions - not nesseceraly bouncing - and this is what makes it happen. This says if the distance between the balls is less than the radii of the 2 balls then we'll do the bouncing. This is a very accurate way of testing collisions for the 2. The next 4 lines are just the bouncing. If you want to know exactly how this works learn trigonmetry. Thats all there is too it. Hope this tutorial helps you understand circle on circle collisions. This is one of my first tutorials on actionscript so please leave feedback using the comment system. Just click where it says "Comments" and then scroll down to the form to post it. -UnknownFury 2 COMMENTS Page 1 of 2 pages    Next Page