CPMStar Ad

Naughty Who @ indiedb

Wednesday, November 16, 2011

Want to Make Games part 2: Assets, Text, Button, Event, Timer

The first article Want to Make Games part 1: Start Up Kit  received feedback and three people already not only want to make games but trying to make games. I was answerving the questions and gathered the next part of information. There are a lot of complex tutorials. They are confusing beginners. So In this article is shown the minimum code needed to start.

Want to Make Games part 2: Assets, Text, Button, Event, Timer Source Code and FlashDevelop Project File - I've made and archive with 8 files adding part of functionality step by step:

1. Main1.as - I guess simplest ActionScript code adding an .svg vector asset to scene, simpler only Hello World! programm ;)
2. Main2.as - Adding a hero to stage also vector .svg
.svg can be made and edited with Inkscape.
3. Main3.as - Adding enemy, he is not vector, it's Bitmap in .png and Sound in .mp3.
.png can be created and edited with GIMP, .mp3 can be synthesized and edited with Wavosaur.
4. Main4.as - Creating and adding TextFiled text.
5. Main5.as - Draw and add simple custom button.
6. Main6.as - Button click interaction.
7. Main7.as - Define main game cycle with timer and simple animation based on it.
8. Main.as - All functionality from above placing to own Game class.
Game.as - The final result code cleaned up with comments:

//Directory where class placed
package
{
    //Imported classes
    import flash.display.Bitmap;
    import flash.display.Sprite;
    import flash.media.Sound;
    import flash.text.TextField;
    import flash.events.MouseEvent;
    import flash.utils.Timer;
    import flash.events.TimerEvent;

    //Class defenition
    public class Game extends Sprite
    {
        //Assets
        [Embed(source="resources/vector/background.svg", mimeType="image/svg-xml")]
        public var BackgroundMenuAsset:Class;  
        [Embed(source="resources/vector/hero.svg", mimeType="image/svg-xml")]
        public var HeroAsset:Class;  
              
        [Embed(source="resources/images/circle.png")]
        public var CircleAsset:Class;  
      
        [Embed(source="resources/sound/hit.mp3")]
        public var HitSoundAsset:Class;  
      
        //Variables
        public var background:Sprite;
        public var hero:Sprite;
  
        public var enemy:Bitmap;
      
        public var hit_sound:Sound;
      
        public var custom_button:Sprite;
      
        public var text_field:TextField;
      
        public var timer:Timer;
      
        //Constructor
        public function Game():void
        {
            //Vector (.svg) background
            //Create
            background = new BackgroundMenuAsset();
            //Place on Screen
            addChild(background);
          
            //Vector hero
            hero = new HeroAsset();
            addChild(hero);
            //Set horisontal position
            hero.x = 125;
          
            //Bitmap (.png) enemy
            enemy = new CircleAsset();
            addChild(enemy);
            enemy.y = 100;
          
            //Sound (.mp3)
            hit_sound = new HitSoundAsset();
            hit_sound.play();
          
            //Custom button
            custom_button = new Sprite();
            //Prommed graphics
            custom_button.graphics.lineStyle(3,0x777777);
            custom_button.graphics.beginFill(0xFFFFFFF);
            custom_button.graphics.drawRect(0,0,100, 20);
            custom_button.graphics.endFill();
            addChild(custom_button);
            //Add responce function to mouse click
            custom_button.addEventListener(MouseEvent.CLICK, onClick);
          
            //Create text
            text_field = new TextField();
            //Disable mouse interaction for text
            text_field.mouseEnabled = false;
            //Set text
            text_field.text = "click";
            addChild(text_field);
            text_field.x = 20;
          
            //Create timer for animation
            timer = new Timer(1000 / 25, 0);
        }
      
        public function onClick(e:MouseEvent):void
        {
            //Testing mouse click responce
            trace("onClick");
            text_field.text = "clicked";
            //Add function to every timer tick once per 1/25 second
            timer.addEventListener(TimerEvent.TIMER, mainCicle);
            //Start timer
            timer.start();
            //Move character to initial position
            hero.x = 125;
        }
      
        public function mainCicle(e:TimerEvent):void
        {
            trace("mainCycle");
            if (hero.x < 600)
            {
                //Move hero
                hero.x += 10;
            } else {
                text_field.text = "click";
                //Stop hero
                timer.stop();
                //Memory clean up
                timer.removeEventListener(TimerEvent.TIMER, mainCicle);
            }
        }
    }
}
Source:
Want to Make Games part 2: Assets, Text, Button, Event, Timer Source Code and FlashDevelop Project File 

My friend with this tutorial received a task of making simplified hidden object game that I consider one of the most simple gameplays ever. Basing on his feedback I'm going to edit/improve this tutorial. Any questions and feedback are appreciated to. The 3rd part is going to be about Classes inheritance and more on Events and their targets.

Play more, make Your games! ;)