next »

[ChevyRay]

Creating 2D Flash Games in FlashPunk With the release of FlashPunk 1.0 and the new website, I've written 7 new beginner tutorials to help people get started creating 2D Flash games in FlashPunk! This begins with a descriptive tutorial explaining how to get the free ActionScript code editor FlashDevelop installed and configured for Windows users. I'm looking for any general feedback on the content, layout, and general readability/communication in the tutorials. These tutorials do not teach ActionScript, and assume that the reader either has previous ActionScript knowledge or has at least read some basic ActionScript primers.

Setting Up FlashDevelop

NOTE: FlashDevelop is a Windows application, so if you are unable to run it on your system, consider an alternative such as the Flash Builder Trial. The rest of the tutorials do not assume usage of FlashDevelop, so if you're coding in something else, you will be able to follow along just fine.

In this tutorial, I will walk you through installing and configuring FlashDevelop. FlashDevelop is a free, open source code editor designed specifically for Flash ActionScript, and is my personal code editor of choice while developing games.

• Step 1: Install FlashDevelop
  
• Step 2: Install Debug Player
  
• Step 3: Download Flex SDK
  
• Step 4: Configure FlashDevelop
  
• Step 5: "Hello World" Test
  

The Basics
In this tutorial I will cover the very basics of FlashPunk. This will serve as a primer for most of the other tutorials, so once you've got your code editor working and SWFs compiling, start here.

• Step 1: Start the Engine
  
• Step 2: Creating Worlds
  
• Step 3: Creating Entities
  
• Step 4: Embedding Graphics
  

Keyboard & Mouse Input
This tutorial covers how to make your game objects respond to keyboard and mouse input in FlashPunk. This tutorial assumes that you have covered The Basics tutorial, and know how to add Entities to Worlds and assign them graphics.

• Simple Key Checks
  
• Specific Key States
  
• Defining Controls
  
• Mouse States
  

Basic Collision
If you've read The Basics and Keyboard & Mouse Input, you're familiar with making an Entity appear and move around with the arrow keys. But one of the most useful things to be able to do in a game is make Entities interact with each other in different ways, and FlashPunk has a set of useful collision functions for this purpose that will be explained in this tutorial.

• Assigning Hitboxes
  
• Collision Types
  
• Colliding Entities
  

Sound Effects
In this tutorial, I will teach you how to embed and play sound effects in your game, as well as how to alter the volume and panning.

• Embedding Sounds
  
• Playing Sounds
  
• Volume & Panning
  

Animated Sprites
In The Basics, we covered embedding graphics and assigned it to an Entity as an Image object; since the Image class is only for single-frame images, this tutorial will cover how to create an animated graphic using FlashPunk's Spritemap class.

• Create a Spritemap
  
• Create Animations
  
• Playing Animations
  

Timing & Motion
If you've already read The Basics and Keyboard & Mouse Input, you know that you can change an Entity's position by altering its x and y properties, which will, in turn, alter the position at which it is drawn to the screen. This tutorial will cover some important things to know about timing and motion while using FlashPunk, related to the timestep chosen when your game starts.

• Choosing a Timestep
  
• Basic Timing
  
• Basic Motion
  

[agj]

Neat. This will be helpful once I get back to making pixelly games in Flash. :) Really want to give FlashPunk a try.

[Aquin]

Wow.  I was gonna install this in a few minutes.  You are at least 87% awesome. 

TIMING!   

[ChevyRay]

Coolness. If you guys have any tutorial requests, or find that something should be added to the library or to these tutorials, let me know and I'll put it on my to-do list.

There are a few more features coming to FlashPunk, such as a new Mask type for animated pixel-precise collisions, some useful tile-loading functions for Tilemaps, etc. Got so much going on right now that I have to split time between projects though.

[Skofo]

Nice! It's all so neatly laid out!

You should show the subcontents of the tutorial categories on the FlashPunk site like you did here. Seeing how nicely organized it all is enticed me to try out FlashPunk.

[ChevyRay]

Hmm, good idea about the subcontent. Will save users some needless clicking around for when the tutorial titles aren't descriptive or clear enough.

Will do that after the weekend.

EDIT: speaking of clicking around, I also need to add a "Back to Tutorials" link at the bottom of each tutorial too, seeing as some of them are quite long and then when they're done one they can just go back to the contents (there's one at the top of each tutorial now, but there should also be one at the bottom).

Maybe having a "Go to [Next Tutorial's Name]" link beside it would be a good idea too.

[Skofo]

I just started on the tutorials, but it doesn't appear to explain how to hook up FlashPunk with FlashDevelop...

Also, the first block of code in the 'The Basics' tutorial is kind of confusing and unnecessary, since it actually has nothing to do with using FlashPunk.

[Pineapple]

I'm wanting to try Flash out, but it refuses to compile.

I made the basic Hello World program but the output says this:

obj\helloworld634106259862710000 (701 bytes)
(fcsh)Build succeeded
Done (0)
[Capturing traces with FDB]
No application is associated with the specified file for this operation

I think I know why this may be, but it's still irritating because I'm lost on how to fix it. FF has the Java Deployment Toolkit on some magical list of programs they disable. It says it causes security issues, and it won't let me enable the plugin.

I did install it for IE, too, though, so I don't know why it wouldn't just be happy with that instead.


EDIT: Well, I did get it to run by executing it in flashdevelop itself, but I'm not completely satisfied. Why wasn't it working?


Oh, hey, look, another edit.
Your tutorial needs to explain how to get the flashpunk stuff to work. I put the net folder in the same directory as the project, and it's showing up in the project thing on the right, but it tells me it doesn't know the methods or classes when I compile.

[ChevyRay]

Your tutorial needs to explain how to get the flashpunk stuff to work. I put the net folder in the same directory as the project, and it's showing up in the project thing on the right, but it tells me it doesn't know the methods or classes when I compile.

Yeah, I'll try to get some more setup stuff in there if I can find half a second of free time, for now I wanted to get the more game related stuff in there. I did mention that it's good to have some basic AS3 knowledge first, although maybe I should've mentioned presumably how to import classes in a package structure. The problem is that different people organize their package structures in their own way, and everybody thinks their own way is the best, so I didn't want to say to do it one way because then I've got a whole different problem to deal with. I'll just say something like "for example" and show how I do it, I guess.

[tametick]

As some one who just started playing around with FP (by digging through the Pink example) this is most obliged!

[Skofo]

Don't feel obligated to do anything, Chev. I just figured it'd be appropriate to list it since the tutorial already goes through the trouble of showing you how to download and hook up everything else.

[Richard Kain]

obj\helloworld634106259862710000 (701 bytes)
(fcsh)Build succeeded
Done (0)
[Capturing traces with FDB]
No application is associated with the specified file for this operation

Well, if that message is to be believed, it appears that your flash application is being compiled, but the program doesn't know which stand-alone application to run it with once it has been compiled. Your system isn't going to know this buy default. It's quite likely that you haven't bothered to install the stand-alone Flash Player on your machine. This is the debug Flash Player that is distributed along with the Flex3SDK (or Flex4SDK if you downloaded it recently) Go to where you have the FlexSDK installed and search through the folders a bit, you will find an installation program for putting the stand-alone debug Flash Player on your machine. Once you've done this, your computer will recognize that all SWF files should be opened with that program by default.

[Aquin]

Actually, _Madk's problem is likely this:

Go to your Project, on the right-hand side, and right-click for properties.  Uncheck the pre/post thingy and enter in the outputted filename and resolution manually. 

Also, make sure you have Flash Player 10 selected, otherwise Flashpunk won't compile properly (the Vector class will be undefined.)

Also, make sure the Flashpunk library is stored in a folder called "net" inside your project folder.  Otherwise it again won't compile properly.

That is all.

[Carrie Nation]

Have to agree with Skofo, my only experience with flash previous to this was some basic stuff with Flixel, and I'm having trouble hooking up FlashPunk correctly.

I tried to do it the way I did it with Flixel, by going to Project->Properties->Classpaths and pointing that to the "flashpunk" folder inside "net" but that didn't seem to work because flash yelled at me for using everything related to FlashPunk when I tried to import it.

EDIT: And just after I post this I fixed it, just have to point FlashDevelop to one level above the net folder, so yeah, pretty basic stuff that even a noob like me can figure out in a few minutes, but it would still be nice to throw a bit in your tutorial about it.

[agj]

You really just need to throw the 'net' (I presume) folder into the 'src' folder if you're using FlashDevelop. Or put it wherever you have all your classes.

[Pineapple]

You really just need to throw the 'net' (I presume) folder into the 'src' folder if you're using FlashDevelop. Or put it wherever you have all your classes.

This worked. Thanks!

[Pineapple]

Hey, step 4 of The Basics won't compile for me.

I get an error "C:\Users\David\Desktop\flash\src\Main.as: Error: A file found in a source-path 'Main' must have the same name as the class definition inside the file 'MyEntity'.
Build halted with errors (fcsh)."

Don't know if I'm doing something wrong or if the tutorial is messed up.

[Carrie Nation]

You're trying to compile a class named MyEntity in a file named Main.

Either change the name of the file to MyEntity or change your class name back to Main. The class name and file name need to be the same.

[BlueSweatshirt]

I get this error trying to embed the sound:

Code:

TypeError: Error #1034: Type Coercion failed: cannot convert MyEntity_SHOOT@29adac1 to flash.media.Sound.
	at net.flashpunk::Sfx()[C:\Users\Jack\Code\FlashProjects\src\net\flashpunk\Sfx.as:28]
	at MyEntity()[C:\Users\Jack\Code\FlashProjects\src\MyEntity.as:15]
	at MyWorld()[C:\Users\Jack\Code\FlashProjects\src\MyWorld.as:7]
	at Main()[C:\Users\Jack\Code\FlashProjects\src\Main.as:11]

I used

Code:

[Embed(source = 'assets/Hooray.mp3', mimeType = 'application/octet-stream')]

Just like the tutorial.

What's wrong? 

[easynam]

take out , mimeType = 'application/octet-stream'