Today we are going to learn how to make the following game:

Note: the demo game above is NOT using the gsensor(for convenience), but the mouse. This tutorial will be using the gsensor.

This tutorial is buildup from a previous Gsensor tutorial. You can find it here.

Preparations

Go on ahead and download the advancedGsensorTutorial.zip from the previous tutorial and open the .fla.

Create a new layer and label it ship.

Next draw anything that looks like a ship… here’s what mine looks like.

Go on ahead and select it and make it into a Movie Clip by right clicking and pressing Convert to Symbol.

Make sure to label the name as hero, check Export for Actionscript, and give it an Identifier name of hero. Click OK.

Great! Now you can delete the hero currently on the Stage because it will be dynamically added on to the screen (Do not delete the hero in the library).

Let’s go on ahead and prepare for blasters!

Draw a simple bullet/blaster and like the hero, let’s make it into a Movie Clip by right clicking and pressing Convert to Symbol or the shortcut F8.

Make sure to label the name as bullet, check Export for Actionscript, and give it an Identifier name of bullet. Click OK.

Like the hero, you can delete the bullet currently on the Stage because it will be dynamically added on to the screen (Do not delete the bullet in the library).

Coding

Our goal for coding will be to replace the default image with the cool hero ship we made and allow it to shoot those bullets we made earlier.

Go ahead and press F9 to open up the actions panel. Assuming you have not touched the code, find line 31 and let’s add a container.

createEmptyMovieClip("container", 0);

This code allows us to store everything into a container MovieClip and control everything in a much more structured manner.

Next find line 36 which says:

var mc:Object = _root.attachMovie("ball", "hero", _root.getNextHighestDepth());

and modify it to say the following:

var mc:Object = _root.container.attachMovie("hero", "hero", _root.container.getNextHighestDepth());

If you’ve made the changes and test the movie out (or even play it on the cowon). You should be able to play with the ship with the gsensor.

Coding the bullet will now require a little more coding, but don’t worry we’ll go one step at a time.

Start on a new line on the bottom of the same Action layer, for me it was line 112.

Let’s begin by making a function for shooting a bullet:

function shoot_bullet(obj:Object) {
 bcnt++;
 var mc:Object = _root.container.attachMovie("bullet", "bullet"+bcnt, _root.container.getNextHighestDepth());
 //centers the mc to the middle of the object.
 mc._x = obj._x;
 mc._y = obj._y;
 mc.spd = 10;
 mc.onEnterFrame = function() {
 //movement applied to this mc
 this._y -= this.spd;
 //bounding restrictions.
 if (this._y<=0) {
 this.removeMovieClip();
 }
 };
}

The following code creates a bullet on the center of the designated object (in our program the hero) and will move to the top of the screen at a speed of 10 pixel per frame and will be removed from the game once it reaches the y coordinate of 0.

You will notice that I am using a variable called bcnt. What is that? Well it is a counter as for how many bullets have been fired off. So let’s define the variable bcnt where all the other variables are defined. In our example, it’s line 27 right under the declaring of the variable gCurRotation add:

var bcnt:Number = 0;

Now we are settled. All we need to do is have an action or an event that calls our newly defined function. Add the following action to the bottom of the code:

onMouseDown = function(){
 shoot_bullet(_root.container.hero);
}

The following code responds to every time the user presses the screen/Mouse is down, the shoot_bullet function will be called causing the hero to shoot a bullet.

Awesome! Well that completes the first installment of making a flight clone. Hope you enjoyed it.

You can download all the files here.

If you come across any trouble say it feel free to comment.

If you would like to just skip the tutorial and just download the file, you can get it here.

Otherwise, let’s get started.

1. Drawing our hero

If we are to move anything with our nifty Cowon G-Sensor, we’ll need a hero object – a ball. Let’s go on ahead and grab the Oval Tool (0) and draw a circle. Once you’ve made a circle select it and make it into a movie clip (F8) and name it “ball” and make sure to check Export for ActionScript and give it an Identifier name of “ball” and press OK (see picture below).

2. Coding our hero

believe it or not, we are 1/2 way there! Well, almost there. Now go on ahead and create a new layer, label it action and lock the layer (see image below).

Now the best part… the code. Press F9 and enter the following code in the “Actions” layer:

/* Variables */
// Always Initialized Variables
var setX:Number = 0;
var setY:Number = 0;
var setZ:Number = 0;

var preX:Number = 0;
var preY:Number = 0;
var preZ:Number = 0;
var DIR:Number = 0;

var curX:Number = 0;
var curY:Number = 0;
var curZ:Number = 0;
var gCurRotation:Number = -1;

//Callibrates the current position of the s9 as the "initial position"
SetXYZ();
stop();

//creates hero with .4 speed sensitivity;
create_hero(.4);
function create_hero(spd:Number) {
//creates a mc and links the mc labeled "ball" and names it hero.
var mc:Object = _root.attachMovie("ball", "hero", _root.getNextHighestDepth());
//centers the mc to the middle of the screen.
mc._x = Stage.width/2;
mc._y = Stage.height/2;
//sensor speed;
mc.sensor_spd = spd;
mc.onEnterFrame = function() {
//the code that allows movement based off of the xyz movement.
_root.ReadXYZ();

//movement applied to this mc
this._x = this._x+this.sensor_spd*_root.curX;
this._y = this._y+this.sensor_spd*_root.curY;

//bounding restrictions.
if (this._x>=480) {
this._x = 480;
}
if (this._x<=0) { this._x = 0; } if (this._y>=272) {
this._y = 270;
}
if (this._y<=0) { this._y = 0; } }; } // s9 Accellerometer function
function SetXYZ():Void { trace("set() working!");
setX = ext_fscommand2("GetEtcTASValueX");
setY = ext_fscommand2("GetEtcTASValueY");
setZ = ext_fscommand2("GetEtcTASValueZ");
if (setZ>0) {
DIR = 1;
} else {
DIR = -1;
}
preX = setX;
preY = setY;
preZ = setZ;
}
function ReadXYZ() {
curX = ext_fscommand2("GetEtcTASValueX");
curY = ext_fscommand2("GetEtcTASValueY");
curZ = ext_fscommand2("GetEtcTASValueZ");

curX = Calibration(curX, preX);
curY = Calibration(curY, preY);
curZ = Calibration(curZ, preZ);

preX = curX;
preY = curY;
preZ = curZ;
if (setZ>=0 && curZ>=0 || setZ<0 && curZ<0) {
curY = curY-setY;
} else if (curY<0) { curY = -512-curY-setY;
} else { curY = 512-curY-setY; }
curX = curX-setX;
curY = curY*DIR*_root.gCurRotation;
curX = curX*DIR*_root.gCurRotation;
}
function Calibration(cur:Number, pre:Number):Number {
if (Math.abs(cur, pre)>80) {
return (pre);
} else if (cur == 0) {
return (pre);
} else {
return (cur);
}
}

3. In Action!

If everything went correctly, the ball hero you created earlier should be spawned in the center, but unable to move. The hero is unable to move since it is moved based on the Gsensor movement of the Cowon. If an output prompt prints, “set() working!” Then it worked. Otherwise, you may have done something wrong.

The code has been commented where needed in describing everything where needed. If you feel the movement is too fast or too slow, you can change the initial speed by changing the variable on the hero:

“create_hero(.4);” // change the .4 to any number;

Again if you would like the source code you can download it here.

Depending on the feedback, I’ll try making this into a series – a break from me making games.

The code to interepret the precise tilts have increased several folds from the original code with a few more complimenting functions, but after several heuristic attempts I think I’ve found the most simplest coding method for utilizing the g-sensor.

I will be releasing a tutorial based on these changes shortly.

After several weeks of preparation, I’m glad to release the Cowon s9 G-sensor tutorial.

I will assume throughout the tutorial that you know the basics of flash. If not, there are plenty of flash tutorial sites available with a simple search. I will be using Flash Professional CS4 so there will be some minor graphical difference, but the concept will be the same as well as the code.

If you only need to see the example source file, then you can download it here.

Otherwise, you can follow along through this tutorial and begin creating a game that utilizes the G-Sensor -let’s get started!

Prerequisites

You will need a Flash IDE program that is able to author Actionscript 2.0 Any Flash IDE from Flash MX and above will work. You can purchase or try the latest version of Flash CS4 here.

The Setup

1. Create a new flash document with AS 2.0 and change the size to 480 x 272.

Note: It is crucial that you open the flash document in AS2.0 because the Cowon s9 will not be able to read AS3.0 flash files and AS1.0 will not be able to save data.

2. We will also need to set the FPS (Frames per second) to 24.

3. On “Layer 1″, relabel it to “actions” and lock the layer.

4. Create one additional layers and label it: objects.

Note: While not crucial to lock the frame label and/or the actions layer it is a good programming habit.

The Objects.

The next portion will focus on the objects you will be interacting with.

5. On the second frame of the Object Layer, add some text.

Click on the text tool and add “This side is up!”

6. If your feeling artistic, draw for yourself an arrow using the shape tools.

7. Once your finished select both the text and the arrow and make it into a movie clip by pressing F8 and name it “mc” with the registration point in the center.

8. Now give this movie clip a new instance name of “mc.”

The Code.

This is what allows flash to act upon the g-sensor.

8. Open up the Actions window by pressing F9 on the “actions” layer of the first frame and insert the following code:

var g_sensor:Number = ext_fscommand2("GetEtcTASValue");
mc.onEnterFrame = function () {
    g_sensor = ext_fscommand2("GetEtcTASValue");
    switch (g_sensor) {
        case 0 :
            this._rotation = 0;
            break;
        case 1 :
            this._rotation = 90;
            break;
        case 2 :
            this._rotation = 180;
            break;
        case 3 :
            this._rotation = 270;
            break;
    }
};

9. Code Explanation:

var g_sensor:Number = ext_fscommand2("GetEtcTASValue");

The variable “g_sensor” is a variable (Can be labeled anything) with a data type of Number. The function call to ext_fscommand2(“GetEtcASValue”) checks for the direction of the s9’s current state and assigns it to g_sensor.

mc.onEnterFrame = function () {
...
}


mc will now (based on the fps) continually run the following function.

g_sensor = ext_fscommand2("GetEtcTASValue");

The value g_sensor will be updated now continually.

switch (g_sensor) {
case 0 :
this._rotation = 0;
break;
case 1 :
this._rotation = 90;
break;
case 2 :
this._rotation = 180;
break;
case 3 :
this._rotation = 270;
break;
}

The switch statement will test for the cases of 0,1,2,3. Each 45 degree change will increment from 0-4 and reset back to 0 after a full revolution.

Test your movie! If you did everything correctly place the .swf file into your flash directory and watch that sign move according to your rotation.

We are done setting up the g-sensor! If you are lost, or would like to start with the file I have created  you can download it here.

Alterations:

I’ve made a game (a simulation) of a ball that you can play around with that utilizes the g-sensor. This simulation allows you to play around with the gravity, the friction, and the bounce back power.

You can download it here.

]]> http://www.2souldesign.net/2009/04/tutorial-cowon-s9-g-sensor-tutorial/feed/ 11 http://www.2souldesign.net/2009/03/saving-data/ http://www.2souldesign.net/2009/03/saving-data/#comments Mon, 23 Mar 2009 06:40:30 +0000 santoki http://www.2souldesign.net/?p=77

In this tutorial you will learn how to save data in flash through a small touch tag game for the Cowon s9. I will assume throughout the tutorial that you know the basics of flash. If not, there are plenty of flash tutorial sites available with a simple search. I will be using Flash Professional CS3 so there will be some minor graphical difference, but the concept will be the same as well as the code.

If you only need to see the example source file, then you can download it here.

Otherwise, you can follow along through this tutorial and begin creating a game that utilizes Shared Objects – the means to save data with your Cowon s9.

Prerequisites

You will need a Flash IDE program that is able to author Actionscript 2.0 Any Flash IDE from Flash MX and above will work. You can purchase or try the latest version of flash CS4 here.

The Setup

1. Create a new flash document with AS 2.0 and change the size to 480 x 272.

Note: It is crucial that you open the flash document in AS2.0 because the Cowon s9 will not be able to read AS3.0 flash files and AS1.0 will not be able to save data.

2. We will also need to set the FPS (Frames per second) to 24.

3. On “Layer 1″, relabel it to “actions” and lock the layer.

4. Create three additional layers and label them accordingly: frame label (locked), text, object.

Note: While not crucial to lock the frame label and/or the actions layer it is a good programming habit.

5. We will need 4 frames total to cover for the following games states: initialization, main menu, play game state, end state.

6. Name the last frame of the frame label layer with “gameover” and the third frame with “game”

We are done setting up the scene. If you are lost, or would like to start with the file I have created so far you can download it here.

The Objects.

The next portion will focus on the objects you will be interacting with.

7. On the second frame of the Object Layer, add a button. You can do this manually, or you can add a common library button.

Windows >> Common Libraries >> Buttons

8. Add a dynamic text field on the Text Layer with a variable name of “highscore”

9. Add any text or decoration you feel fitting for a title/menu screen.

9. On the the third frame in the Object Layer, Create a circle with Oval Tool with size of 100 x 100 and place it somewhere on the canvas.

10. Convert the circle you have just made to a Movie Clip instance by

Double Click on it to select it
Press F8 and choose “Movie Clip” under Behavior radio button
Click OK

11. Give the new Movie Clip the instance name of “ball”

12. Create three new dynamic text on the Text Layer with the variable names of “timer”, “score”, “highscore”. Place them where you want them listed. Remember to add static texts to label what each dynamic text represents.

13. Lastly, on the last frame ( the game over screen) of the Object Layer, add another button.

14. Add one last dynamic text labeled “score”.

15. Finish the Game Over screen by decorating it to your will.

We are done setting up the visual scene. If you are lost, or would like to start with the file I have created so far you can download it here.

The Code.

This is what allows flash to save data.

16. Open up the Actions window by pressing F9 on the “actions” layer of the first frame and insert the following code:

score_record = SharedObject.getLocal(“name_of_file”);

if (score_record.data.highscore == undefined){

highscore = 0;

} else {

highscore = score_record.data.highscore;

}

5. Let’s see what this does:

score_record = SharedObject.getLocal(“name_of_file”);

// Replace “name_of_file” to the filename you choose for the Shared Object.

// The variable “score_record” is the name for the data stored.

highscore = 0;

// if no highscore has been defined, it will be initialized to 0.

highscore = score_record.data.highscore;

// if a highscore has been defined, it will be set to the saved highscore.

16. On the second frame insert the following code:

stop();
var score:Number = 0;
var initial_timer:Number = 120;
var timer:Number = initial_timer;

17. Let’s see what this does:

var score:Number = 0;
// The score is initially set to 0.

var initial_timer:Number = 120;
// We set the initial timer to 10 seconds.
// In this example we have 120 because we have 24 fps. eg: 24 fps * 5 sec = 120.

var timer:Number = initial_timer;
// We then set the timer to the initial timer.

18. On the third frame insert the following code:

stop();
onEnterFrame = function(){

_root.timer-=1;
if (score > highscore){

highscore = score;

}

if(timer < 0 ){

gotoAndStop(“gameover”);

}

}

ball.onLoad = function(){

this._x = random(480-this._width)+this._width/2;
this._y = random(272-this._height)+this._height/2;

}

ball.onPress = function(){

_root.score+=1;
_root.timer += 5;
this._x = random(480-this._width)+this._width/2;
this._y = random(272-this._height)+this._height/2;

}

19. Add the following code to the button on the Object Layer :

on(release){
_root.gotoAndPlay(“game”);

}

20. Let’s see what this does:

// onEnterFrame is our main loop
onEnterFrame = function(){

// The variable timer looses one every loop.
_root.timer-=1;

// If the player reaches a score that is greater than the current highscore,
// the highscore will be replaced with the current score.
if (score > highscore){

highscore = score;

}

// If the timer is less than 0 the game will end to the “gameover” framelabel.
if(timer < 0 ){

gotoAndStop(“gameover”);

}

}

ball.onLoad = function(){

/*
To randomize the ball’s next location we have this code:
We first randomize the value of the screen size minus the ball’s height.
We then add it’s radius to create a offset from the center.
The same principal is done for the height.
*/

this._x = random(480-this._width)+this._width/2;
this._y = random(272-this._height)+this._height/2;

}

// This function activates whenever the ball movieclip is pressed.
ball.onPress = function(){

// score is incremented by one for every successful click.
_root.score+=1;

// A bonus time of 5 is given for a successful press.
_root.timer += 5;
/*
To randomize the ball’s next location we have this code:
We first randomize the value of the screen size minus the ball’s height.
We then add it’s radius to create a offset from the center.
The same principal is done for the height.
*/
this._x = random(480-this._width)+this._width/2;
this._y = random(272-this._height)+this._height/2;

}

21. On the fourth frame insert the following code:

stop();
if (score>=highscore) {

score_record.data.highscore = score;
score_record.flush();

}

22. Let’s see what this does:

// A record is set!
if (score>=highscore) {

// We now set the score to the highscore variable.
score_record.data.highscore = score;
// The score is saved to the Shared Object.
score_record.flush();

}

23. Finally add the following code to the button on the Object Layer.

on(release){
_root.score = 0;
_root.timer = _root.initial_timer;
_root.gotoAndPlay(“game”);
}

24. Believe it or not, you are finished. If you did everything right, after testing your movie (ctrl+Enter) you should be able to save your new game. If you are lost, or would like to start with the file I have created so far you can download it here.

If you have any questions, thoughts, suggestions and/or comments, feel free to post them here. If there is an error in my post feel free to point them out as well.

]]> http://www.2souldesign.net/2009/03/saving-data/feed/ 1