Page 1 of 1

Making flash games for the non-flash developer Part I. Discusses how to start developing games using Flex 3 and ActionScript

#1 coden4fun  Icon User is offline

  • if(coden4fun.NotTired){ ContinueToCode(); }
  • member icon

Reputation: 27
  • View blog
  • Posts: 696
  • Joined: 27-February 09

Posted 11 March 2009 - 07:17 PM

Preface
This is the beginning of an 8 part series of writing a finished flash game using Flex and ActionScript 3. Here I list the tools needed, layout the overall goal, give us strict deadlines,create the project, and make the game toggle fullscreen mode.

Before we begin
Before we begin we should set an actual goal, and some deadlines for this goal. Think of it as working on an actual game project for a game development company, so here is what we're going to lay down.

Our Goal: Make a fully functional finished game! The game should have a custom menu, look professional, easy to learn, incorporate a scoring system, and should be design in code where we can enhance the game in the future as in add on to it. The game should also feature some level of AI, and incorporate different enemies, characters. The type of game I have in mind, but I would like the readers to vote on it is Centipede, or Galaxian. I would like people who are reading this to either vote for one of the 2, or suggest one, and I will focus this series of tutorials on that specific game and making it with Flex and ActionScript 3. Now for starting the project.

Current Goals
  • Create the game project and toggle fullscreen mode
  • Create all scenes and menu
  • Create player, and events so player can move around the screen
  • create the enemies, bullets and collision for such game entities
  • Create AI special enemies, and level ups
  • Create lives, kills, scoring and game over system
  • Create scoring board system
  • Play test and polish the game up
Introduction
There have been many online based games that has changed the pop-culture of the video game industry. These games for the majority of them have all been developed in Flash. Such games that come to mind are Alien Hominid Alien Hominid HD that even made a port to the PS2, N N: the way of the ninja(also known as N way of the Ninja), and even some old favorites that seem to never die like Quake 3 Play Quake 3 Forever

Going to the adobe website, and checking out some flash statistics is just shocking, for Flash has become the world's most pervasive software platform, used by over 2 million professionals and reaching 99.0% of internet-enabled desktops. That's more than Java by 18%. So, you can see why any real serious game developer would want to make a game for flash now don't you?

You have the potential of reaching 2 million people, but what if you're like me, and you have no Flash skills whatsoever, but worse you're stuck in the world of programming, and the idea of messing around a GUI to make sprites animate is just nerve racking? Well don't worry, for there is a handy SDK that can you out, where you will only need to know your programming skills, and that SDK is called Flex.


Obtaining Flex

Flex is a highly productive, free open-source framework for building and maintaining expressive web applications that runs off of the Flash player. Now I must correct myself, and anyone else who believes Flex is completely free, as in working with flex is free, for it's not that easy. The Flex SDK is free, which can be found here. However, a nice debugger + IDE + workspace isn't so free, but you have options. You can go with either with the Flex Builder, or the eclipse Flex plug-in both can be downloaded from here, which both of them can be tried out for 60 days. Once you download this go ahead and install it by walking through the wizard, and we'll be ready to start our project.



Starting the Project


Ok, once we've installed the program let's start by opening up either the Flex Builder, or Eclipse and create a new flex project by going to File > New > Flex Project. Our Flex navigator will be shown on the left side of our workspace, which is our file directory of our project we're currently working in, and the main attraction is the editor. It should have created a default mxml application, and opened it up for you. The name will be whatever you named your project, and you can either rename it, or leave it as the default. It won't matter for what we're doing.

Now for the code. I have found the best way to discuss code is to give just give it all at once, and then line by line discuss what's going on, so without further a due here's the code...

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2007/08/07/creating-full-screen-flex-applications/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" 
	layout="absolute"
	applicationComplete="init()"
	frameRate = "120"
	width="100%"
	height="100%"
	enterFrame="update(event)">

	<mx:Script>
		<![CDATA[
		
			import flash.display.StageDisplayState;
			
			//init initialize first function called when we start our app
			protected function init():void
			{
				
			}
			
			//toggle fullscreen
			protected function toggleFullScreen():void
			{
				try
				{
					switch(Application.application.stage.displayState)
					{
						case StageDisplayState.FULL_SCREEN:
							Application.application.stage.displayState = StageDisplayState.NORMAL;
							break;
						default:
							Application.application.stage.displayState = StageDisplayState.FULL_SCREEN;
							break;
					}
				}
				//if we can't go fullscreen trace the error
				catch(err:SecurityError)
				{
					trace (err.message);
				}
			}
			
			//function called when screen is redrawn.
			protected function update(event:Event):void
			{
				
			} 
		]]>
	</mx:Script>

	<!--button only used to toggle fullscreen-->
	<mx:Button label="Toggle fullscreen" click="toggleFullScreen()" x="{Application.application.width / 2}" y="{Application.application.height / 2}" />
</mx:Application>



Our Flex code

OK, now for some interpretation.

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" 
	layout="absolute"
	applicationComplete="init()"
	frameRate = "120"
	width="100%"
	height="100%"
	enterFrame="update(event)">





This code simply tweaks the properties of the Application object by setting specific attributes that the Application object is allowed to tweak.

applicationComplete, which calls for a function soon as the application is fired up, so calling a function named init() (short for initialize ) makes sense.

frameRate - defines the limit of frames per second that the application can't exceed. So if you want a higher FPS set it to a higher number, but note just because you set this to a high number doesn't mean you're going to get it, since this is just the limit that the FPS can't exceed. You're actual fps will be determined by computer performance.

width and height - This is common sense for the most part it sets the width and height of the flex application to that specific number, and setting it to 100% will mean that the application will use the entire screen's resolution.

Note this doesn't mean you're giving your application "fullscreen" you're just using the entire resolution of that screen, so if someone has a 640x480 resolution vs a 1280x768 your game will cover both screens, so your game doesn't look too large on small screens, or too large on small screens.


enterFrame
- This is pretty much saying everytime the screen is redrawn we want to call the function, which in this particular case we've named update(), and since we have a framerate of 120 (which means 120 frames-per-second), and we've maxed out on 120, or are using the max fps we can use then we're calling update every 0.0083333... seconds, so naming the function update makes sense.

Now I would like to quickly jump to the button, and skip the script just long enough to explain why I have a button for this first bit of code.

the button
<mx:Button label="Toggle fullscreen" click="toggleFullScreen()" x="{Application.application.width / 2}" y="{Application.application.height / 2}" />



This simply creates a button in the middle of the screen with the label of "Toggle fullscreen", which puts the text of "Toggle fullscreen" on the button, and when triggered calls a function called toggleFullScreen(), which toggles the fullscreen mode of our game. I have also set the position of this button to be in the middle of the screen by binding the x and y position of this button to be half of that of the application width, and height.

Now for the ActionScript 3 part.

ActionScript 3 code


 import flash.display.StageDisplayState;



This imports the StageDisplayState class, and allows us to work with the display state of the application, so in other words it's the class that is needed to toggle fullscreen on/off.

As you have seen in the Flex code we have called for 3 functions, which are init(), update(), and toggleFullscreen()

Init() and update() as described above when we set them as parameter do precisely what I've explained before, but since they have no real code in this first tutorial I will not go to any more great detail about them, and jump to the toggleScreen() function.

//toggle fullscreen
			protected function toggleFullScreen():void
			{
				try
				{
					switch(Application.application.stage.displayState)
					{
						case StageDisplayState.FULL_SCREEN:
							Application.application.stage.displayState = StageDisplayState.NORMAL;
							break;
						default:
							Application.application.stage.displayState = StageDisplayState.FULL_SCREEN;
							break;
					}
				}
				//if we can't go fullscreen trace the error
				catch(err:SecurityError)
				{
					trace (err.message);
				}
			}



As we create this application we're actually displaying it on a stage, and in the flash.display.StageDisplayState does precisely what the class name implies, and that is check, and update the state of the stage display. This allows us to find what display state the stage is in, and either make the two available normal, or fullscreen.

The switch statement does precisely that in the toggleFullScreen() function.

If we're in fullscreen already then we go back to our normal state, and since the application was about going to fullscreen the default is fullscreen state, so if we're in normal mode, and we trigger toggleFullScreen then we will see ourselves go from normal mode to fullscreen mode.

Conclusion

We have created our project, setup the basic function which we will be calling as we initialize our game, as we redraw sprites on our stage in our game, set our fps so it won't exceed some ridiculous amount, and have even made our game support FullScreen mode, which most all games do. Now we will continue this tomorrow when we make our double buffer, and the menu for our game, and I will then reveal what game we will make from beginning to end, but until then.....

And if I don't get any suggestions on making Centipede or Galaxian I will choose by tutorial #2 when I create the menus, and the scene management for the game.

Happy Coding!

Is This A Good Question/Topic? 0
  • +

Replies To: Making flash games for the non-flash developer Part I.

#2 theosoft  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 2
  • Joined: 12-March 09

Posted 12 March 2009 - 03:11 AM

I'd be interested in seeing a tutorial on Galaxian. That's one of my all time favorite games. Better yet, make it more like Galaga. I look forward to what you have to offer.
Was This Post Helpful? 0
  • +
  • -

#3 coden4fun  Icon User is offline

  • if(coden4fun.NotTired){ ContinueToCode(); }
  • member icon

Reputation: 27
  • View blog
  • Posts: 696
  • Joined: 27-February 09

Posted 12 March 2009 - 03:32 AM

View Posttheosoft, on 12 Mar, 2009 - 02:11 AM, said:

I'd be interested in seeing a tutorial on Galaxian. That's one of my all time favorite games. Better yet, make it more like Galaga. I look forward to what you have to offer.


Thanks, I'm writing tutorial 2 right now, and hope to be done with it, and send it in before I go to bed tonight. Galaga it is!
Was This Post Helpful? 0
  • +
  • -

#4 theosoft  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 2
  • Joined: 12-March 09

Posted 12 March 2009 - 07:38 AM

View Postcoden4fun, on 12 Mar, 2009 - 02:32 AM, said:

View Posttheosoft, on 12 Mar, 2009 - 02:11 AM, said:

I'd be interested in seeing a tutorial on Galaxian. That's one of my all time favorite games. Better yet, make it more like Galaga. I look forward to what you have to offer.


Thanks, I'm writing tutorial 2 right now, and hope to be done with it, and send it in before I go to bed tonight. Galaga it is!


Sweet. I've written my own game in Flex before, but I'm interested to see someone else's approach to it.
Was This Post Helpful? 0
  • +
  • -

#5 jkennedy  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 5
  • Joined: 13-March 09

Posted 13 March 2009 - 10:31 PM

Thanks for your time and effort, I've been searching for some time to find a resource that could help me with game development with Flex 3. It seems all other resources are geared to designers using Flash or old AS2 projects that really don't apply.

Again, thanks and I'll be following along.
Was This Post Helpful? 0
  • +
  • -

#6 softshelpro  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 6
  • Joined: 06-March 09

Posted 19 March 2009 - 03:30 PM

Ya, I will vote for the Galaxian as well.
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1