Game Concepts | FrozenHaddock

10Jun/094

How to get out of a creative block

We've all been there, haven't we?

The need to develop, but no idea where to start. Idea count down in the region of times I've successfully run cross country without complaining (For those who even pondered that for a second, that's approximately... none), and you don't know what to do about it.

Well, if you've stumbled across this post through a search engine, you've started right. Research is a great way to get ideas and get out of a creative slump.

If the next time you open flash, you end up staring at a blank stage for 10 minutes, close it again. Open up your browser of choice, and surf on over to one of the larger games portals. Have a look at what's doing well right now, as well as looking at the brand new submissions. You're bound to find a feature, gameplay element, idea amongst them that you think you could apply to a new game. (Note: Don't outright copy games, but developing on ideas they've touched upon is a great way to start a new game)

If you can't find anything here, why not check out some retro games? They can often be addictive, fun and easily portable to Flash.

Also, try checking out some independant developer sites (Hey look, you're doing that now!) and read some game development blogs (You're doing that too, good job!). A good place to start with searching for new Flash blogs to read would be FlashGameBlogs (Another brainchild of the FGL team)

Of couse, if these ideas dont' manage to get you out of your slump, try this:
Close your eyes, mash the keyboard and cross your fingers. It's better than doing nothing ;)

Bookmark and Share

Close Bookmark and Share This Page

Save to Browser Favorites / Bookmarks

Email This to a Friend

Copy HTML:

If you like this then please subscribe to the RSS Feed.

Tagged as: block, blog, creativity, idea, ideas, research, slump, think 4 Comments

10Oct/080

AS3: Avoiding game part 3

That's right, part three of MichaelJWilliams's AS3 translation of the avoiding game tutorial serie s has been released (I have to say, I like your style Michael, Once an upgrade can be found I'll be learning along with them) and you should go and check it out!

Bookmark and Share

Close Bookmark and Share This Page

Save to Browser Favorites / Bookmarks

Email This to a Friend

Copy HTML:

If you like this then please subscribe to the RSS Feed.

Filed under: AS3, Flash, Forum, Game Concepts, Games, Tutorials, Uncategorized, User Contributions No Comments

9Oct/0812

Avoiding game pt 5b

The avoiding game tutorial series:
Part 1 Part 2 Part 3 Part 4 Part 5 Part 5b

Ok, ok, so I've gotten a telling off for how long the code in part 5 was... so here it is with fixes from Brart and MichaelJWilliams!

The frame code (With fixes from Brart):

stop();
clock = 0;
lives = 3;
score = 0;
enemies = 4;
enemiesonstage = 0;
timer = function () {
clock += 1;
};
enemytimer = function () {
enemies += 1;
};
onEnterFrame = function () {
if (enemiesonstage<enemies) {
var enemy:MovieClip = attachMovie("enemy", "enemy"+enemiesonstage, _root.getNextHighestDepth());
enemiesonstage += 1;
enemy.dir = random(4);
//This line sets the sizes randomly to begin with
enemy._xscale = enemy._yscale=random(100)+50;
if (enemy.dir == 1) {
enemy._x = random(300);
enemy._y = random(-50);
enemy.yspeed = random(7)+1;
enemy.xspeed = 0;
} else if (enemy.dir == 2) {
enemy._x = random(300);
enemy._y = random(50)+300;
enemy.yspeed = random(-7)-1;
enemy.xspeed = 0;
} else if (enemy.dir == 3) {
enemy._x = random(-50);
enemy._y = random(300);
enemy.yspeed = 0;
enemy.xspeed = random(7)+1;
} else if (enemy.dir == 0) {
enemy._x = random(50)+300;
enemy._y = random(300);
enemy.yspeed = 0;
enemy.xspeed = random(-7)-1;
}
enemy.onEnterFrame = function() {
this._y += this.yspeed;
this._x += this.xspeed;
if (this.hit.hitTest(_root.player)) {
if (_root.lives>=1) {
this.dir = random(4);
//This line re-randomises the scale of the enmy when it hits the player
this._xscale = this._yscale=random(100)+50;
if (this.dir == 1) {
this._x = random(300);
this._y = random(-50);
this.yspeed = random(7)+1;
this.xspeed = 0;
} else if (this.dir == 2) {
this._x = random(300);
this._y = random(50)+300;
this.yspeed = random(-7)-1;
this.xspeed = 0;
} else if (this.dir == 3) {
this._x = random(-50);
this._y = random(300);
this.yspeed = 0;
this.xspeed = random(7)+1;
} else if (this.dir == 0) {
this._x = random(50)+300;
this._y = random(300);
this.yspeed = 0;
this.xspeed = random(-7)-1;
}
_root.lives -= 1;
}
}
if (_root.lives<=0) {
_root.gotoAndStop("gameover");
this.removeMovieClip();
}
//Brart Fixes
if (this._y>=310 && this.dir == 1 or this._y<=-20 && this.dir == 2 or this._x>=320 && this.dir == 3 or this._x<=-20 && this.dir == 0) {
this.dir = random(4);
//This line re-randomises the scale when the enemy leaves the stage
this._xscale = this._yscale=random(100)+50;
if (this.dir == 1) {
this._x = random(300);
this._y = random(-50);
this.yspeed = random(7)+1;
this.xspeed = 0;
} else if (this.dir == 2) {
this._x = random(300);
this._y = random(50)+300;
this.yspeed = random(-7)-1;
this.xspeed = 0;
} else if (this.dir == 3) {
this._x = random(-50);
this._y = random(300);
this.yspeed = 0;
this.xspeed = random(7)+1;
} else if (this.dir == 0) {
this._x = random(50)+300;
this._y = random(300);
this.yspeed = 0;
this.xspeed = random(-7)-1;
}
}
//End Brart Fixes
};
}
};

And the code on the player (With fixes by MichaelJWilliams):

onClipEvent (load) {
_root.timeclock = setInterval(_root.timer, 1000);
_root.enemyclock = setInterval(_root.enemytimer, 5000);
//Fix start
if (_root.character>=1) {
this.gotoAndStop(_root.character);
}
//Fix end
}
onClipEvent (enterFrame) {
Mouse.hide();
this._x = _root._xmouse;
this._y = _root._ymouse;
if (this._x>=300) {
this._x = 300;
} else if (this._x<=0) {
this._x = 0;
}
if (this._y>=300) {
this._y = 300;
} else if (this._y<=0) {
this._y = 0;
}
}

Now, I'm not the most efficiancy based person out there, infact I'm probably one of the least, so if you think you could write it better, comment here or post at the forum to shout at my laziness! If enough of you do it I might buck my ideas up, honest!

Bookmark and Share

Close Bookmark and Share This Page

Save to Browser Favorites / Bookmarks

Email This to a Friend

Copy HTML:

If you like this then please subscribe to the RSS Feed.

Filed under: Flash, Game Concepts, Games, Tutorials, User Contributions 12 Comments

16Sep/0814

Avoiding Game pt.5

The avoiding game tutorial series:
Part 1 Part 2 Part 3 Part 4 Part 5 Part 5b

This is part 5 of the avoiding game tutorial series, in which I have gradually shown you how to create an avoid and collect game. Make sure to read parts 1, 2, 3 and 4 before reading this, it'll all make much more sense that way!

In this part of the tutorial, we're going to add a simple character select screen to our game. This won't add -much- to gameplay (Unless you have different sized characters, which will increase or decrease the difficulty), however it will add to the overall impact of your game. I'll also show you a few tips to organising your game to make it easier to add more in later. (Something we didn't do very well earlier, my fault, wasn't expecting this tutorial to be so popular!)

So, let's see what you'll have after finishing this part!

Ok then, let's get to work!

A few changes, and a hint on organisation

First of all I need to show you a few changes you need to make before we continue. Because we will be adding extra frames in earlier on the timeline, some of our buttons will become pointed at the wrong frame. For example, putting a frame in between the current frame one and two, will mean our play game button sends us to the new frame.

Because we'll most likely want to add in more and more new features to our game as we go along, this could become an annoyance, updating our button numbers every time we want to add a new frame in, so instead we can label our frames, and send our buttons to those instead. Labels stay on the frame regardless of if you move the frame, and this makes them very handy for the indecisive among us who like to chop and change frame order, or those who forget to add them in earlier.

Button

First, you'll need to change your Play button on your main menu. Replace the existing actionscript with the following:

on(release){
gotoAndStop("charselect");
}

This charslect frame doesn't exist yet, we'll come to that in a moment. Whilst you're on the main menu screen, select the frame on the timeline and open up the properties box. Here you'll see an input text box for the Frame Label, label this frame 'menu'.

Now click onto your main game frame. Repeat the process above but instead label this frame 'game'. Easy eh?

Game Over

The enterFrame function needs editing too, but only a little. Find the code below, and replace it with the code below that code.

if (_root.lives<=0) {
_root.gotoAndStop(3);
this.removeMovieClip();
}

if (_root.lives<=0) {
_root.gotoAndStop("gameover");
this.removeMovieClip();
}

Ok? Good. Now lets fix up our Game Over frame. Click onto it and label it 'gameover', then select the replay button and open the actions. Replace it's current actions with the following:

on(release){
gotoAndStop("game");
}

As you may have guessed, the way we refer to Frame Labels is much the same as Frame Numbers, but when writing them in our Actionscript we must surround them by "s to make Flash recognise them as labels.

I highly encourage you to use Frame Labels in your projects, they make things so much easier! I'll be making a post soon going into other organisational techniques, they'll come in handy!

Create the character select screen

Insert a new frame between frames 2 and 3, and make sure it's blank of anything bar the background/menu design. Label it, 'charselect'. Then, draw your choice of characters (Make sure to include your current one!), for the purposes of this tutorial we'll have a choice of 3 different ones. Then convert each to a button.

Skull Buttons

Right. Now we have our frame setup, it's time to write some actionscript. On this frame's actions, you'll need to write the following:

stop();
character=0;

The stop will keep the timeline from moving on, and this 'character' variable is what we'll use to see which player the user wants for their character. Each of our buttons will change this variable, so let's write the script for those now.

Skull Script

on(release){
_root.character=1;
_root.gotoAndStop("game");
}

This can be copied onto the other two buttons, but remember to change character=1, to 2 and 3 for your consecutive characters!

That's the screen done, now onto the trickier part.

Setting up the player to change!

Switch over to your main game screen, and enter the player movieclip. You need to copy each new character into new frames, making sure the Frame Number they're on matches the variable you set on thier button earlier. Then just add a few stop(); actions, something like this:

Player Setup

All you need to do now is to switch back to your main game frame, and open up the actions for your player. We need to modify the onClipEvent(Load){, so replace it with this: (Make sure you leave the onClipEvent(enterFrame){ alone!!)

onClipEvent (load) {
_root.timeclock = setInterval(_root.timer, 1000);
_root.enemyclock = setInterval(_root.enemytimer, 5000);
if(_root.character==1){
this.gotoAndStop(1);
} else if(_root.character==2){
this.gotoAndStop(2);
} else{
this.gotoAndStop(3);
}
}

!-EDIT-!

Michael J Williams has commented below with a much more efficient (And handy) way to handle the actual changing of the character, replace the following:

if(_root.character==1){
this.gotoAndStop(1);
} else if(_root.character==2){
this.gotoAndStop(2);
} else{
this.gotoAndStop(3);
}

with:

if(_root.character>=1){
this.gotoAndStop(_root.character);
}

Thanks Michael! (You may well be seeing more of him soon...)

Now, test your game, should all be working fine!

A few notes before I end with the generic 'give me suggestions'

Those of you converting this to use the arrow keys rather than the mouse may find this tutorial helpful.

And, those of you sending files to me for help need to send them to alternateaccount[AT]frozenhaddock.co.uk, and they need to be in Flash 8 format or below, I don't have CS3 yet! (And I doubt I ever will, what with CS4 being released rather soon)

Also, to those looking forward to my avoiding game, it should be out shortly, I'll post with a link when it is.

And now for my desperate begging, please comment with any ideas or suggestions you have for this, or indeed any tutorial! I have the next part of this planned for implementing some powerups, so if you have ideas for those make sure you comment below and I'll try my best to get them added in!

Grab the source.... here.

Bookmark and Share

Close Bookmark and Share This Page

Save to Browser Favorites / Bookmarks

Email This to a Friend

Copy HTML:

If you like this then please subscribe to the RSS Feed.

Filed under: Flash, Game Concepts, Games, Tutorials 14 Comments

31Jul/0818

How to create a Simple Maze game (Preview)

So yeah, I'm being lazy. I know, I know. I'm partway through writing Avoiding Game pt3, so there! I am doing something! Just... not much. So here's a quick engine for you to play around with while I write up a tutorial to go alongside it. If you have anything you'd like to add, comment and I'll see what I can do.

Click here to play that thar simple mouse avoider maze related game!

And clicky here to grab the source.

Have a play and see what you can come up with, and keep poking me to write the tutorial. You know I'll forget!

Bookmark and Share

Close Bookmark and Share This Page

Save to Browser Favorites / Bookmarks

Email This to a Friend

Copy HTML:

If you like this then please subscribe to the RSS Feed.

Filed under: Engines, Flash, Game Concepts 18 Comments

4Jun/08309

How to make a simple Avoiding game

The avoiding game tutorial series:
Part 1 Part 2 Part 3 Part 4 Part 5 Part 5b

FrozenHaddock Tutorials: Simple Avoiding Game

In this tutorial you will learn how to create a simple dodge game, this will help learn about hittesting, whilst allowing new flash developers to get a quick and easy game.

You will be making a game like this;

The first thing we will do is set up our flash document. I'm setting mine up as 300x300px, 24fps and I've chosen grey as a background colour. You can choose different dimensions, but you will have to change the actionscript to reflect that.

Now we need to setup our character. Draw your character onstage and convert it to a movie clip (F8). Name it accordingly and make sure the registration point is in the centre. Then open up the properties bar for your player and set the instance name to player.

Charsetup

Now, open the character's actions panel and give it these actions;

onClipEvent(enterFrame){
Mouse.hide();//hides the mouse
this._x=_root._xmouse;//sets the x of the player to the x of the mouse
this._y=_root._ymouse;//sets the y of the player to the y of the mouse
}

Now test your movie, the player mc will now follow the mouse, good. So lets move onto some enemies.

Draw your enemy on the stage, and convert this to a movie clip. As with the character name it accordingly and set the registration point to the centre.

enemysetup

Open up the actions panel for your enemy and add these actions;

onClipEvent (load) {
this._x = random(300);//sets the horizontal position randomly
this._y = random(-50);//sets the y position above the stage
speed = random(5)+1;//sets the speed randomly
}
onClipEvent (enterFrame) {
this._y += speed;//moves the enemy downwards
if (this.hitTest(_root.player)) {//if the enemy hits the player
_root.gotoAndStop(2);//goto the second frame, which will be a gameover screen
}
if (this._y>=310) {//if the player reaches 10 pixels below the stage
this._x = random(300);//randomly set the x, y and speed again.
this._y = random(-50);
speed = random(5)+1;
}
}

Test your movie now, and see your enemy fall down the stage. You can copy and paste this enemy for multiple enemies.

Now, before we setup a game over screen, we'll setup a timer. (For a more indepth tutorial on creating this, see here)

Draw anything, and convert it to a movie clip. Move it off the stage.

offscreentimer

Now, double click this to get inside the mc, and add a frame in at 24, or whatever value you set your fps at. open the actions of this frame and enter;

_root.clock+=1;

Double click anywhere to return to the main timeline, and click on your frame. Add these actions in;

stop();
clock=0

Right, so now the clock is timing, we need a way to see it. Use the text tool to add a new text box onstage. Open the properties bar for this text box, and change the drop down menu from 'static' to 'dynamic'

synamic

Then, keeping the bar open, change the var: input box to clock

varbox

Test your movie, you'll see the clock time as you play.

Right, now for the game over screen, giving users their time and an option to replay.

Add a new blank keyframe on the main timeline. On this new frame setup the way you want it to look. Make sure to copy the dynamic textbox from the other frame wherever you want your players time to show. I have this;

gameoverscreen

(NOTE: I just realised, you'll want to put Mouse.show(); on the frame here so you can actually click your button.)

Of course, we need to give our players the option to play the game again, so we need to setup a button. More information on setting up a button can be found on the site.

The actions we want on this button are these;

on(release){
gotoAndStop(1);
}

Now test your movie, and play your fully functioning avoision game!

If you learn more about hittests and variables, you will be able to setup scoring and powerups etc. But that's for you to learn yourself!

Download the source file

Remember, post your creations on the Forum!

Bookmark and Share

Close Bookmark and Share This Page

Save to Browser Favorites / Bookmarks

Email This to a Friend

Copy HTML:

If you like this then please subscribe to the RSS Feed.

Filed under: Engines, Flash, Game Concepts, Games, Tutorials 309 Comments

21Apr/087

How to make a button mashing game: Step 1

Due to a request over at triquitips.com I'm going to be showing you how to create a button mashing game. It's fun, it's pretty easy, and here's how to do it.

Setting up the visuals

On stage I have 2 arrow movie clips instanced as left and right respectively, a large bar movie clip as tall as your final bar will be, but about twice as wide. Finally I have the shape you want to act as your bar as a mask for the bar movieclip, and I added a title. I like titles. I'm going to go ahead and assume you can follow this fine, if you have any problems at any point throw me an email (alternateaccount[AT]frozenhaddock.co.uk) or hit me up on Skype (tdxiiifrozenhaddock), or of course you could throw yourselves to the mercy of the comments below for public advice. Anyway, on with the tutorial

We'll look at the code, and I'll explain later on:

button = 1;
power = 0;
gain = 5;
loss = 2;
lossspeed = 1;
losscount = 0;
keylistener = new Object();
keylistener.onKeyDown = function() {
if (Key.isDown(Key.LEFT) && Key.isDown(Key.RIGHT)) {
trace("doublepress");
} else {
if (Key.getCode() == Key.RIGHT && button == 1) {
power += gain;
button = 2;
}
if (Key.getCode() == Key.LEFT && button == 2) {
power += gain;
button = 1;
}
}
};
Key.addListener(keylistener);
onEnterFrame = function () {
losscount += 1;
if (losscount>=lossspeed || power>loss) {
power -= loss;
losscount = 0;
}
bar._yscale = power;
if (power>=100) {
power = 100;
trace("yay");
}
if (power<=0) {
power = 0;
trace("lose!");
}
};

Right, here you'll see we're using a key listener to capture the key presses from the user, which we then test against.
I'll explain more in-depth.

button = 1;
power = 0; //Your starting power
gain = 5; //How much power you gain each buttonpress
loss = 2; //How much you lose each interval
lossspeed = 1; //How long the interval is
losscount = 0;

These are the variables that control the engine, play around with these to get the feel right for your individual project.

keylistener = new Object();
keylistener.onKeyDown = function() {
//function
Key.addListener(keylistener);

These lines create the Keylistener, and then open a function that will run every time any key is pressed.

if (Key.isDown(Key.LEFT) && Key.isDown(Key.RIGHT)) {
trace("doublepress");
}

These lines check if the user is pressing both keys at the same time, if they aren't, then it will test the next part, which is the following.

if (Key.getCode() == Key.RIGHT && button == 1) {
power += gain;
button = 2;
}
if (Key.getCode() == Key.LEFT && button == 2) {
power += gain;
button = 1;
}

This is what actually controls your bashing, if, when a key is pressed, the right one is down and the button variable is showing it should be the right button pressed, add the gain to current power. Same for the left button.

It's easier to comment the enterFrame function, so here it is:

onEnterFrame = function () {
losscount += 1; //every frame, add 1 to the losscount variable, which times it
if (losscount>=lossspeed || power>loss) { //if the timer is bigger than the interval, and the power is above the minimum
power -= loss; //take the loss var away from the power
losscount = 0; //reset the timer
}
bar._yscale = power; //this makes sure the bar is the right scale
if (power>=100) {
power = 100;
trace("yay"); //You should replace this with a win function
}
if (power<=0) {
power = 0;
trace("lose!"); //you should replace this with a lose function
}
};

Right, that's it for this, apologies for the lateness and I shall be adding to this in the future. So request features below in the comments or over in the forum (when it's up)

KEYBASH!

Download the source

Bookmark and Share

Close Bookmark and Share This Page

Save to Browser Favorites / Bookmarks