I've put <br/> tags on the end of every line and surrounded it with a <p></p> as a temporary fix-up. Hopefully a mod will come along and fix the formatting some time... and when that happens, expect this post to gain double line spacing.
Not sure what this is about?
* Guide for Shootorials #0, #1, and #2
* Scroll down to the big "#5 and #6" text to see the #5 and #6 bit of the guide
#3 and #4
In this guide I will assume you have followed the instructions from the first guide and managed to build the moving ship with scrolling background.
This guide is a lot shorter, because these shootorials mainly introduce ActionScript stuff that we don't have to change.
As before, you'll need to watch the Shootorials in question:
* Shootorial #3
* Shootorial #4
and write out/code the ActionScript code from them: the changes to Ship.as and the new files Missile.as and EnemyShip.as. Once again we won't be needing to make changes to these.
As for other resources, you'll need an enemy ship picture located at source_assets/enemyShip.png. For the missiles, as Shootorial #3 says, you could create an image in an external program and import it like the rest... but just for fun, we're going to draw a missile with ActionScript! :)
I'm going to dive right in and give you the XML for both these Shootorials at once. There isn't anything too surprising in it.
<?xml version="1.0" encoding="UTF-8"?>
<movie version="8" width="600" height="300" framerate="30">
<background color="#ffffff"/>
<frame>
<clip id="Classes.swf" import="Classes.swf"/>
<clip id="scrollingBackground.jpg" import="source_assets/scrollingBackground.jpg"/>
<clip id="ship.png" import="source_assets/ship.png"/>
<clip id="enemyShip.png" import="source_assets/enemyShip.png"/>
<library>
<clip id="DrawMissile" class="DrawMissile"/>
<clip id="Ship" class="Ship">
<frame>
<place id="ship.png" depth="16384" x="-39.5" y="-18.5"/>
</frame>
</clip>
<clip id="EnemyShip" class="EnemyShip">
<frame>
<place id="enemyShip.png" depth="16384" x="-37" y="-18"/>
</frame>
</clip>
<clip id="Background" class="Background">
<frame>
<place id="scrollingBackground.jpg" depth="16384"/>
<place id="scrollingBackground.jpg" depth="16385" x="2110"/>
</frame>
</clip>
<clip id="Missile" class="Missile">
<frame>
<place id="DrawMissile" depth="16384"/>
</frame>
</clip>
</library>
<place id="Background" name="background" depth="16384"/>
<place id="Ship" name="ship" depth="16385"/>
</frame>
</movie>I've added a new image clip, enemyShip.png, then used that clip later in another clip in the library, EnemyShip. Don't forget to make sure this image actually exists, or swfmill will throw an error! If you compare this bit to the ship.png and Ship clips you'll see they're pretty similar; I import the image clip, make a clip in the library, and place the image clip in that clip at minus half its width by minus half its height (to set the registration point in the centre). Notice I do not have a <place/> tag at the bottom for EnemyShip, because it's only going to be created from the ActionScript.
The added Missile clip isn't much different either, except that instead of placing within it a clip that imports an image, which is what all the other ones do, it places a DrawMissile clip, which has a class attribute in place of the import attribute. It is also unlike the "image clips" in that it is in the library. This is needed for all clips that have a class attribute.
It's probably easiest to explain this in terms of what happens in the game. When you press space, the code in Ship.as notices you pressed space, and calls
AttachMovie( ... ) on the clip with id Missile. Since we've defined a clip with this id in the <library/> tag, this is the one that gets created. It is linked with the Missile class, so it will move across the screen nicely. Every time that Missile clip is created, another clip gets created within that one with id DrawMissile. Since we have defined a clip with this id in our XML, that is the one that is used. As that clip has no <place/> tags or import attributes, it's basically an empty (transparent) clip... but that doesn't matter! Since we added a class attribute to it, a new instance of the type DrawMissile will be created for us, every time!So, all we need to do is place code in DrawMissile.as that will draw the missile when it loads! Piece of cake:
class DrawMissile extends MovieClip {
function DrawMissile() {
//Not keen on drawing? Use this to test the missile system
// createTextField( "missiletext", getNextHighestDepth(), 0, 0, 100, 100 ).text = "MISSILE!";
//Thickness two pixels, black, 100% opaque
lineStyle( 2, 0x000000, 100 );
beginFill( 0xffffff );
//Control point x and y, then end point x and y
moveTo( -3, 2 );
curveTo( -7, 0, -3, -2 );
lineTo( 3, -2 );
curveTo( 7, 0, 3, 2 );
lineStyle( 1, 0x000000, 100 );
lineTo( -3, 2 );
endFill();
}
}I'm not going to explain how any of the drawing bits work; since you may as well learn it from the excellent set of three guides from which I learned it, located here.
Now build your game and test it. Hopefully it should work.
See you in the next guide! (Just scroll down a bit...)
Now: I actually prepared a lot more than this in my example code for guides #3 and #4 -- I added enemy missiles, which was easy; and sounds, which was a real headache.
* Example code.
Don't forget on Mac OS X and Windows you'll have to put it in directories next to mtasc and swfmill, like before (so you will have one directory containing within it a directory for mtasc, a directory for swfmill, the old game directory (on my system called Shoot0), and the new game directory (which I called Shoot1)).
As before, if you're on Linux or OS X, run the build script (which should hopefully work on both); on Windows run build.bat.
You'll notice that I've snuck in a file called Sounds.swf. This contains all of the sound files from the AS2 source. I've done this for two reasons: swfmill doesn't support .wav files yet, and the version of swfmill most people will have (less than 0.1.12-6) truncates short mp3s. Importing a swf file this way causes all the exported (in <library/> tag) ids from that file to suddenly be available from ActionScript... but NOT available in the swfmill XML. Luckily we can (and would, anyway) do all our sound attaching from ActionScript.
If you want to use your own sounds, what seems to work best is mp3s created with lame:
lame -b 16 -m m -q 0 --resample 44.1 infile.wav outfile.mp3
The most important bit of that is
--resample 44.1. Without that, it probably won't work (although YMMV). If you want to use sounds from the Scion Toolbox, try lame --resample 44.1 in.mp3 out.mp3, and don't forget that you'll need swfmill 0.12.2.6 from here.Adding them to swfmill is almost identical to adding an image. You'll work it out.
#5 and #6
Feel free to post problems in this topic.
* Watch Shootorial #5!
* Watch Shootorial #6!
* Download example implementation code for all platforms
The main problem you will encounter in using the free tools for these Shootorials is the inability to open the FLA file and copy the enemy missile, explosion animation, the health bar, and the game over screen. But you were going to make your own ones anyway, right? :) See the next post for hints on what you can do to draw stuff. The most important thing to remember is that you must use the same id attribute as the Shootorial if you're going to call
attachMovie() on it, and you must use the same instance name attribute in the <place/> tag to refer to that instance in code. If you have problems with things not working like they do in the Shootorials, this is the first thing to check!I recommend that you create the explosion animation in some ordinary raster image program, saving each frame as a PNG file: then add it to the swfmill library as a clip with multiple frames; each frame containing a clip, also in the library, containing a single image. If you look at the example implementation code downloadable above, you'll see that's exactly what I have done.
The enemy missile can be drawn in the same way as the hero missile. The health bar should also be easy to do with the line drawing and fill methods explained above for the missiles, although in my implementation I've been lazy and just drawn them in GIMP.
If you want to do it with Actionscript you'll need a clip which has a class which draws the background, and also containing a clip with another class that draws the green bar, which contains another clip with has yet another class that draws the border! That's a clip within a clip within a clip in the XML, with three .as files! No wonder I did it the other way.
The game over screen shouldn't be too much of a challenge; take a look at the implementation code if you get stuck. My implementation isn't brilliant -- it'd be nice if the button sized itself to be just big enough to contain the text, for example.
The only really new thing in the XML is the text field and the font. You could create the textField in the ActionScript (MovieClip's
createTextField() instance method); which has the advantage of being able to set more complicated properties than you can with swfmill's simple template. However, we'll do this one in the XML as a demonstration. <!-- This is how you put comments in XML, by the way -->
<!-- The following lines go in the <library/> tag -->
<font id="Comic Sans MS" import="source_assets/comicsans.ttf"/>
<textfield id="ScoreText" width="110.2" height="32" size="20" font="Comic Sans MS"/>
<!-- This next line goes after the <library/> tag, after the Background and Ship and such -->
<place id="ScoreText" name="scoreText" depth="16387" x="294.9" y="3.0"/>Don't forget to put the TTF file somewhere swfmill will be able to find it.
