Showing posts with label game. Show all posts
Showing posts with label game. Show all posts

Tuesday, 10 April 2012

Getting creation event coordinates for Game Maker

I am currently getting into using Game Maker for games development, and am beginning to use 'timelines' to initiate the creation of 'enemy' object instances.

Two of the parameters needed in the object instance creation event are the X and Y coordinates for the object's creation. This is very easy to input, but only if you know the intended pixel coordinates off the top of your head, which is less easy to simply guess at, and for some games may need something more precise than a guess.

One way to find out these coordinates is to keep reverting back to the 'room' and hovering your mouse over the grid. As you do this some digits in the bottom left of the screen will tell you the nearest grid point X and Y to where your mouse is hovering. You could make a mental note, then revert back to the timeline and input the digits.

Personally, I find this annoying and fiddly.

So, to save me some annoyance, and speed up my development, I have produced a couple of game screen coordinate reference grids that help me. All you do is print them out and keep them handy.

My guess is that if they help me, they might help you, in which case you can download the game screen coordinate reference grids in PDF format here.

Please note these are released under a creative commons license.

Happy game developing.

Monday, 9 April 2012

Getting used to code free game development

Not too long ago I began a games design course to formalise and extend my knowledge and skill in this area of interactive media. The interactive media of my earlier career has evolved over the last decade into what I recognise are two distinct areas. While web design has been around for longer than that, it's earlier "1.0" incarnation was barely able to support what might be termed "interactive media", which back then was pretty much the sole domain of CD ROMs. With the development of Broadband, faster computers, and browser technology, what used to be delivered on CD or DVD is now easily obtained online - so that now interactive media = web design (to a great degree). The other direction of the interactive media industry then, still delivered on hard media, is Games. Since I know web design and Flash fluently, I decided to make the move in the direction of game.

The introductory part of the course, like many courses, assumes little or no knowledge. So we are using Yoyo's Game Maker as the initial authoring tool to learn basic development concepts. Powerful though Game Maker is, I do find the "code free" development slightly frustrating. I finally find myself at the other end of the ladder than I was 13 years ago. Back then I would have given anything to be able to build games, or any complex interactive media, without having to write a line of code. Since then I have got down to it and learned a great deal of ActionScript and such like over the years, and now find the coding aspect logical and sensible. Now I am forced to use a GUI to drag icons around to make "code" I find it frustrating, but am getting used to it.

Take this example for instance:


The visual equivalent took a bit more thought to drag together, than the ActionScript based syntax I am now used to. It's partly because of being unfamiliar with where to look for the draggable items, and partly because it would just be quicker to type.

I laugh to myself because now I finally understand what my coding whiz brother, and others like him, were thinking when I took delight in code free authoring environments all those years ago. They found them slow in comparison to coding by hand. And now... so do I.

Does this mean I have arrived?

Meanwhile, I am getting used to Game Maker, and I understand I am able to code by hand if I want to so I am happy to recommend this excellent product. Tally ho!

Tuesday, 18 October 2011

Game Development - High Score Leader Boards in Flash

One way of increasing the repeat appeal of a game, particularly for 1 player games, is to include a leader board of high scores. This gives the player an additional goal of beating their previous best score, allowing them to compete with themselves, and other players, even if the game has only 1 player mode.

As long as your game stores the player's score under the variable "score" this example should provide a good starting point for your own leader board or high score board.

In this example I am using ActionScript 2.0 in Flash.

The Code

The code for this is split into 3 parts. First we create a multidimensional array for keeping the scores and player signatures. Second, we store the score from the game, third we create the leader board that transfers data in and out of the array.

Part 1 - Create a Multidimensional Array

In my game the leader board only shows the top 10 scorers. For each one it displays the score and a 3 character signature from the player.

Before we can store data we need to create the place to store it. In this case I am using a multidimensional array. Multidimensional because I want to store 10 elements (1 for each of the top 10) with 2 data elements (score and signature) per player. Doing it this way allows me to sort them later based on score so I can display them from highest scorer to lowest scorer.

My approach was as follows:

/*NEW ARRAY*/
/*Make a new array object*/
var leaderboard_array:Array = new Array ();
/*'Push' data elements onto the array*/
leaderboard_array.push ({initials:"---", score:"0"});
leaderboard_array.push ({initials:"---", score:"0"});
leaderboard_array.push ({initials:"---", score:"0"});
leaderboard_array.push ({initials:"---", score:"0"});
leaderboard_array.push ({initials:"---", score:"0"});
leaderboard_array.push ({initials:"---", score:"0"});
leaderboard_array.push ({initials:"---", score:"0"});
leaderboard_array.push ({initials:"---", score:"0"});
leaderboard_array.push ({initials:"---", score:"0"});
leaderboard_array.push ({initials:"---", score:"0"});

This code must run only once, run it again and you will add to the end of your array, eventually making it huge.

In effect we create an array of 10 elements, that each contain an array of 2 elements. An array within an array. Using the approach I have, where I have named each 'sub'-element "initials" and "score" means that later I can refer to these directly by name - which makes coding a bit easier to do and debug.

My new array includes pre-coded default values, this means something will display the first time and we don't get a blank leader board.

Part 2 - The Game

Your game is your own. The important thing is that you store the players "score" at the end of the game.

Because the my_array.sort(Array.NUMERIC)in Flash does not work correctly (see here), we cannot use strict datatyping  when we define our variables. So, when you first define the "score" variable, all you need to do is:

var score = 0;

Don't do:

var score:Number = 0;

Or the code won't work later, when we have to treat "score" as a string for sorting.

When the game is over, just make sure you store the player's score in the "score" variable, e.g.:

score = endgamescore;

Part 3 - The Leaderboard

At this point we have an array, and a "score". In this part of the program we need to do the following as essential elements.

a. Test whether the player's latest "score" is greater than the lowest score on the current leader board.
b. If it is, allow the player to input a 3 character signature and store it, along with the "score" in the array replacing the previous lowest score.
c. Sort the array by score so each one is listed in order of greatness.
d. Display the contents of the array in text box to show the leader board to the player.

There is more to it than that, especially since sorting numerically in Flash is not actually possible by direct means - I have gone into detail on that on another post - so much of the code is required to solve that problem.

The following code relies on the stage containing:

1. A text input box with the instance name "initials_txt"
2. A button with the instance name "button_btn"
3. A dynamic text box with the instance name "lb_txt"

The code is then as follows:

/* vars */
/* strict datatyping is off for score and sortscore in order to sort it due to restriction in Flash */
var sortscore = 0;
var initials:String = "";
/*set character limit on input text*/
_root.initials_txt.maxChars = 3;
/*PRE-POPULATE LEADERBOARD WITH CURRENT DATA FROM ARRAY*/
for (var i = 0; i < leaderboard_array.length; i++) {
    _root.lb_txt.text += leaderboard_array[i].initials + " " + leaderboard_array[i].score + "\n";
}
/*ADD NEW SCORE ON SUBMIT*/
_root.button_btn.onPress = function () {
    /* get player name value*/
    initials = _root.initials_txt.text;
    /*convert score to decimals ready for correct sorting*/
    sortscore = score / 10000;
    /*convert score values in array to decimals ready for correct sorting*/
    for (var i = 0; i < leaderboard_array.length; i++) {
        leaderboard_array[i].score = leaderboard_array[i].score / 10000;
    }

    /*sort current board by score - low to high*/
    leaderboard_array.sortOn ("score");
    /*if player score is higher than lowest score on board, replace it with player score and name*/
    if (sortscore > leaderboard_array[0].score) {
        _root.leaderboard_array[0].initials = initials;
        _root.leaderboard_array[0].score = sortscore;
    }
    /*sort again to position the new score and initials correctly in order compared to other scores in array*/
    leaderboard_array.sortOn ("score");
    /*convert all the 'decimaled' scores back again to real scores*/
    for (var i = 0; i < leaderboard_array.length; i++) {
        leaderboard_array[i].score = leaderboard_array[i].score * 10000;
    }
    /*reverse the order of the array to show scores from high to low*/
    leaderboard_array.reverse ();
    /*clear existing text from the leader board text box*/
    _root.lb_txt.text = "";
    /*print new array content to the leader board text box*/
    for (var i = 0; i < leaderboard_array.length; i++) {
        _root.lb_txt.text += leaderboard_array[i].initials + " " + leaderboard_array[i].score + "\n";
    }
};

That's the main thrust of it - read the comments in the code to see what each lump of code is doing. Of course there is scope to develop on this yourself, but I hope this helps. Happy leader board-ing.

Wednesday, 25 August 2010

Simple Platform Game Engine in Flash

This year my students will be learning about game engines. For 3D they will most likely use the Unreal Development Kit, along with 3DS Max/Carrara 8 Pro for content creation. But that's all 3D - what about the 2D games? Well, for 2D, my platform of choice is Flash.

Problem is, that unlike the UDK, or Unity, or even the FPSC, Flash is not a game engine - and that means, not only creating and scripting content for 2D games, but also scripting the whole engine.

It's something I have been meaning to do for a while. And while I know that many talented developers have posted Platform game solutions online, there is something about working through the problem yourself that I really like. Besides, I don't always get on well with other people's code - and if I am to teach my students to code their own, I need a solution I have worked out so I know it inside out and backwards and can really explain it to them.

Many of you will want the code now, but I am still fine tuning it. Meanwhile, here is version 4d as a peep of how it is going so far (I am currently on version 4f).

Controls:
JetPack = SPACE

Left = LEFT ARROW
Right = RIGHT ARROW
Climb Ladder = UP/DOWN ARROW




When it is finished I will post the code and an explanation.

Friday, 5 March 2010

Game Engines go Free

If you have been tempted to cross the boundary between 2D interactive media or games or 3D animation into 3D games, you will probably know you need to get a decent 3D game physics engine.

That's where my brain has been lately, and consequently I have turned my attention to physics engines. In my mind it was initially a toss-up between Epic's UnrealEd, which comes with Unreal Tournament, or the FPS Creator from The Game Makers.

UnrealEd would have been first choice since I know it is used by a local university on their Game Art degree, on the other hand the FPSC had good features too, and in some ways was less complex and perhaps more suitable for allowing (high school level) students to quickly preview their characters and in-game objects.

However as I did some digging I found that the current plethora of game engines out there, including some open source offerings, has made the area highly competitive. So competitive in fact that well respected commercial engines are now becoming available FREE for personal use, or under developer licenses where you only pay if you make money. This combined with all the free stuff, makes for quite a choice.

Commercial Game Engines for Free

UDK - Unreal have released what they call the Unreal Development Kit, it contains all the tools previously only available to commercial developers or those with a lot of spare cash. This now seems to replace UnrealEd from my point of view.

FPSC - The Game Makers have released a free developers edition of FPSC. It has all the features of the pay for version minus network games and compile - but the pay for is only £30 these days anyway.

Unity - Described as being the best game engine this side of a $million, it normally retailed at about $200, but a free development version is now available too, and looks pretty amazing.

Freeware or Open Source Game Engines

Blender - Has long been capable of producing 3D games made interactive with Python scripting.

Platinum Arts Sandbox 3D Game Maker - purports to be popular with educational environments.

Cheap Game Engines

The 3D Game Maker - I thought I would throw this one in. Although very limited in terms of customisation, for some educational purposes (e.g. Level 1 and 2) this could be ideal. With a bit of technical know how students can include their own 3D models (.x format) in their games.


Well, I already owned FPSC, the 3D Game Maker, and UnrealED, but now I have downloaded Unity and the UDK (be interested to see how UDK is different from UnrealEd). I can hardly wait to get started.

Monday, 28 September 2009

eLearning Business Game (Arrays in action)

My last post was all about my array sorting problem. But I thought you might want to see the final product.

It was actually a game I put together to help my new students relax and get to know each other, but then I tweaked it and made it available for anyone to download.

Available here: http://digitalarena.co.uk/teach/markettraders/

The array was used in the part of the game that displays the team's performance as a graph. I needed to find a way to make the graph always fit in the available space. That meant finding the highest score and then working out a scale ratio that I could apply as the graph drew, so it always fit in the graph space.

So what has this to do with arrays? Well... finding out the absolute highest score of each team's highest score meant storing them all in an array and then sorting them (lowest to highest). Then I just had to retrieve the last item in the array to get the highest.

Wednesday, 12 August 2009

Mouse Control for Flash Games - Part 2 - (Top Down Driving Game with Steering)

A couple of months ago I posted a solution for getting a MovieClip to follow the mouse, with easing. It was a quick solution for controlling the 'player' in a top-down car game.

Since then I have revised the code to also make the 'player' rotate in the direction of travel, to simulate the effect of the car steering.

Take a look:

Original Movie (without steering) - Demo SWF







Modified Code (with steering) - Demo SWF







As you can see the rotation produced by the modified code offers more realistic looking game play, allowing the 'player' car to appear to swerve as the player moves the mouse, and making the 'player' car straighten up as it comes to the end of its movement.

The Code

The code is actually remarkably simple, much simpler than I expected. As I look back through my development versions it gets progressively simpler as I cut out all the redundant code and am left with only what matters.

I will give you the code below, the comments explain how it works. Just paste it into your Flash Actionscript panel, and click the format button to make it nice and easy to read:

/* Includes code from http://dansinteractive.blogspot.com http://www.digitalarena.co.uk */
/* This code works best if your movie is set to run at 30fps. */

/* The higher the frame rate the lower this number must be. */

var easing = 10;

/* Influences how far the player_mc rotates in response to the mouse distance from the player_mc. The lower the number the greater the rotation. */

var rotatefactor = 4.5;

/* This function animates the player_mc in response to mouse moving. */

onEnterFrame = function () {

/* Works out the current distance between the X coordinate of the mouse and the X coordinate of the player_mc */

mousediff = _root._xmouse-_root.player_mc._x;

/* Moves the player_mc along the X axis towards the location of the mouse with easing to provide some delay and smooth movement. */

_root.player_mc._x += mousediff/easing;

/* Rotates the player_mc towards the mouse. The amount of rotation is determined by the difference between the player_mc location and the mouse location along the X axis, and the rotation factor defined in the variable at the top. The closer they are together the smaller the amount of rotation, the further apart the larger the rotation.
With the _rotation method a negative number means anti-clockwise (counter-clockwise) and a positive number means clockwise. Even so, we do NOT need to test which side of the player_mc the mouse is on to determine whether the angle of rotation should be positive or negative. This is because we base the rotation on the distance between the mouse and the player_mc, and if the mouse is to the left of the player_mc this code will return a negative number which in turn will give us a negative rotation factor. Cool.*/

_root.player_mc._rotation = mousediff/rotatefactor;
};


As you can see, the whole affect is achieved without trigonometry. As such it simulates the visual appearance of the 'player' car steering, but is not a mathematically accurate model of steering. But it is only intended to provide user mouse control of a car for a simple top-down driving game - accurate physics are not necessary.

The thing I am most pleased about (apart from the cool effect) is how little code it takes. Without comments, it is a mere 7 lines long. And yet it provides so much more engaging game play (I think so anyway). If you find it helpful, leave a comment.

Later.

Friday, 6 March 2009

Carrara 6 Pro - Free with DigitalArts Magazine


For those of you interested in 3D modelling and animation I have to recommend that you buy the April 2009 edition of DigitalArts magazine (came by mail today - expect in WHSmiths very soon I expect).

The free software in this edition is none other than Carrara 6 Pro, an extrememly powerful and versatile 3D modeller and animator. Other people have written far more detailed reviews than I ever will, but to sum up the changes:

Carrara 6 allows users to choose from an unprecedented array of tools while exploring new dimensions in 3D creation. Carrara 6 provides 3D figure posing and
animation, modelling, environment-creation and rendering tools within a single
application.

Carrara 6 features include non-linear animation, giving users the ability to create clips of animation that can be reused and combined on multiple tracks. Also includeds is dynamic hair that allows artists to style, cut, brush and drape the hair, and displacement modeling where the user can paint detail on a model using free-form brush tools.


Apart from the non-linear animating and the hair, the icing on the cake was that it can export in DirectX (.X) format, and converts procedural shaders into raster images on export. Finally, I can use a program I am extremely familiar with to make models for 3D games and export them directly without having to convert them using other programs (at least that is the implication with .X export - I will of course try it out with my copy of The 3D Game Maker, and FPS Creator (also available free for learning purposes).

Ever since version 1 I have found Carrara to be one of the most easily learned 3D animation and modelling programs. Even so beginners may be glad of a little help in which case they will find Mark Bremmer's video tutorials helpful to get started.

I am certainly not going to complain that Daz is continuing to follow its strategy of giving freebies to DigitalArts readers (or readers of any other creative journal for that matter), and earning most of its income from selling content for its Daz Studio product. On pondering why I considered 2 possible causes. First, E-on have had their open beta of Vue 7 going for a while and by launching cornucopia have thrown down the gauntlet to Daz in the pre-made content arena. Second, by giving Carrara away free on design and creative journals they may encourage more talented 3d designers to produce content which can then be sold in their store. Well... it's a nice theory. Whatever the reason, Carrara 6 for the price of a magazine has to be a bargain.

Friday, 10 October 2008

Switches and Key Listeners for Game Controls

Well I just can't help fiddling around with code to see what I can do. I began toying with making some kind of game where you control a craft of some kind and must avoid the bad things and pick-up the good things.

Rather than dive straight into graphics I followed the best practice and began making the code work first. What follows is the simple beginnings of a game control script that uses a key listener object to check what key the player is using. Then, instead of using if else as I might usually be tempted to do I decided to use a switch to check which key is being pressed and change the direction of acceleration accordingly. For this to work for you, all you need to do it dump a movieclip onto the stage with the instance name "ship_MC", then copy the following code into your first key frame:

/*Up, down, left and right keys control direction. Space is the emergency brake.*/

/*Set initial values for direction and speed, and the rate of acceleration */
xspeed = 0;
yspeed = 0;
accelerate = 1;

/*Create the key listerner object*/
var myControlKeyListener:Object = new Object();

/*Set up a conditional response to the key press that changes the value of xspeed and yspeed depending on which key is being pressed and for how long.*/
myControlKeyListener.onKeyDown = function() {
switch (Key.getCode()) {
case Key.SPACE :
trace("space");
xspeed = 0;
yspeed = 0;
break;
case Key.LEFT :
trace("left");
xspeed -= accelerate;
break;
case Key.UP :
trace("up");
yspeed -= accelerate;
break;
case Key.RIGHT :
trace("right");
xspeed += accelerate;
break;
case Key.DOWN :
trace("down");
yspeed += accelerate;
break;
}
};
/*Add the key listener*/
Key.addListener(myControlKeyListener);

/*Animate the direction and velocity of the ship_MC movie clip according to the value of xspeed and yspeed */
onEnterFrame = function () {
this.ship_MC._x += xspeed;
this.ship_MC._y += yspeed;
};

The comments between the /* */ in the code above explain how it works. If you have not used switch before, and tend to stick to if else you will find in some cases that switch is much easier to work out the logic for and takes less typing.

Demo SWF





Friday, 7 March 2008

Normal Mapping

Just a quickie tonight, I just had to tell you about this great tutorial I found for creating normal maps. A genius called Ryan Clarke is altruistic enough to share his technique free and for nothing on his site here >.

Why do I care? Basically as an interactive media blokey, I am interested in this latest method of adding detail and realism to games.

To begin with 3D games were made using very low res meshes and texture mapping. Bump mapping adds more realism by adding a little height and depth to a surface texture on the polygons - this is done using a grayscale image to represent the height of the bumps, (the lighter the pixel the higher the altitude etc.) but it still looks like blocks with textures. To remove the blockiness of the models you would expect to have to increase the number of polygons they are made up of. This is no good for games where the computer has to render 30+ fps on the fly. This is where normal maps help.

To really grasp this you need to know what a normal is >.

Normal mapping works on a similar principle to bump mapping in that it is essentially a graphic wrapped round a mesh, but it goes much further. Normal maps use an RGB image which instead of containing just height data in each pixel contains the X Y Z 3D orientation of the normal.

These then render much more realistically almost as though they were meshes themselves and have the added bonus of rendering faster. This allows PC's and games consoles to increase the apparent level of detail in the models without increasing the polygon count.

Normal mapping (above) compared to bump mapping (below) - images courtesy of Inagoni makers of a normal mapping plugin for Carrara.
Anyway, I just wanted to bring your attention to the fact that you can make your own normal maps quite easily using a torch, a digital camera, and some image editing software - take a peep >