Introduction of Pokemon Online Game Theme

This Pokemon Online Game Theme Tutorial is very basic and simple. If you haven’t seen my Portfolio, here could be one of the possible results: Oscar Liang’s Portfolio.

Some of the links on this page are affiliate links. I receive a commission (at no extra cost to you) if you make a purchase after clicking on one of these affiliate links. This helps support the free content for the community on this website. Please read our Affiliate Link Policy for more information.

Before we start, download this zip file. It contains all the files, images we will be using in this tutorial.

[Download the Unedited Files]

I will be showing you how to create a 2D webbased game environment (in this case, Pokemon Online Game Theme), how you control the character and interact with the gaming environment. I will take this step by step, expanding the detail from the character, decorations (background objects), and how they work together.

I assume you already have experience in CSS and Javascript (jQuery). If not, go and learn it and it shouldn’t take you very long to get the basics. Also, you can use the latest version of  Google Chrome, Firefox, Safari, Opera and IE9 for this tutorial (Tested), but not IE8 or below. Okay, let’s begin.

1. Walking Character

This is how the character picture we use to generator the animated character looks like.

How it works is, depends on which direction the character is walking, it choose the corresponding row, from top to bottom, front, left, right, back. And while the character is walking, we toggle through the 3 images with some delay, so it looks like the character is walking.

In the index.html file, add this to the body

[sourcecode language=”html”]

<div id=”character”></div>

[/sourcecode]

Add this to the style.css file,

[sourcecode language=”css”]

#character {
top: 50%;
left: 50%;

width: 32px;
height: 32px;

position: absolute;
margin: -16px 0 0 -16px;

background: url(‘img/male_oscar.png’) no-repeat;
background-position: -32px 0px;
z-index: 50;
}

#character.front-right { background-position: 0px 0px; }
#character.front-stand { background-position: -32px 0px; }
#character.front-left { background-position: -64px 0px; }

#character.left-right { background-position: 0px -32px; }
#character.left-stand { background-position: -32px -32px; }
#character.left-left { background-position: -64px -32px; }

#character.right-right { background-position: -64px -64px; }
#character.right-stand { background-position: -32px -64px; }
#character.right-left { background-position: -0px -64px; }

#character.back-right { background-position: 0px -96px; }
#character.back-stand { background-position: -32px -96px; }
#character.back-left { background-position: -64px -96px; }

[/sourcecode]

You should now see a character standing in the middle of your screen. Next, you want to write some Javascript code to make it move when you press your arrow keys on the keyboard. Copy this code into your script.js file,

[sourcecode language=”js”]

//Global variables that will be accessed in the functions below.

var TimerWalk; // timer handle for walking
var charStep = 2; // current step, 1=1st foot, 2=stand, 3=2nd foot, 4=stand
var currentKey = false; // records the current key pressed
var lockUp = false; // when lock up, character won’t be able to move
var me; // character object

// Settings:
var walkSpeed = 70; //ms, animation speed
var walkLength = 8; //px, move how much px per “walk”

$(document).ready(function() {

me = $(‘#character’);
//add character state class
me.addClass(‘front-stand’);

//KeyDown Function
//if there is key down, execute charWalk
$(document).keydown(function(e) {

if (!lockUp && (currentKey === false)) {

currentKey = e.keyCode;

//execute character movement function walk(‘direction’)
switch(e.keyCode) {
case 37:
walk(‘left’);
e.preventDefault();
break;
case 38:
walk(‘up’);
e.preventDefault();
break;
case 39:
walk(‘right’);
e.preventDefault();
break;
case 40:
walk(‘down’);
e.preventDefault();
break;
}
}

});

//KeyUp Function
$(document).keyup(function(e) {

//don’t stop the walk if the player is pushing other buttons
//only stop the walk if the key that started the walk is released
if (e.keyCode == currentKey) {

//set the currentKey to false, this will enable a new key to be pressed
currentKey = false;

//clear the walk timer
clearInterval(TimerWalk);

//finish the character’s movement
me.stop(true, true);

}

});

});

//Character Walk Function
function walk(dir) {

// convert from language to code
// left and right are the same
if (dir == ‘up’)
dir = ‘back’;
if (dir == ‘down’)
dir = ‘front’;

//set the interval timer to continually move the character
TimerWalk = setInterval(function() { processWalk(dir); }, walkSpeed);

}

//Process Character Walk Function
function processWalk(dir) {

//increment the charStep as we will want to use the next stance in the animation
//if the character is at the end of the animation, go back to the beginning
charStep++;
if (charStep == 5)
charStep = 1;

//clear current class
me.removeAttr(‘class’);

//add the new class
switch(charStep) {
case 1:
me.addClass(dir+’-stand’);
break;
case 2:
me.addClass(dir+’-right’);
break;
case 3:
me.addClass(dir+’-stand’);
break;
case 4:
me.addClass(dir+’-left’);
break;
}

//move the char
switch(dir) {

case’front’:
newX = me.position().left;
newY = me.position().top + walkLength ;
break;

case’back’:
newX = me.position().left;
newY = me.position().top – walkLength ;
break;

case’left’:
newX = me.position().left – walkLength;
newY = me.position().top;
break;

case’right’:
newX = me.position().left + walkLength;
newY = me.position().top;
break;
}

// Animate moving character (it will also update your character position)
me.animate({left:newX, top: newY}, walkSpeed/2);

}

[/sourcecode]

This is the core of the moving character code, you should be able to understand what it’s doing by reading the comments, if not drop me a message and I will explain further. You should now have a walking character!

You might also be wondering, where can I get a personalized sprite for my own character. Well, you can try googling sprite generator, or go to this japanese site which I sometimes use. Or you can google images with Pokemon Online Game, you should be able to find more.

2. Decorations

Now since we have a walking character, we can move on to make the Pokemon Online game look beautiful.

Go to your style.css file and add the following codes

Let’s have a grassy background:

[sourcecode language=”css”]
body{
overflow:hidden;
background: url(img/bg.png) repeat;
}
[/sourcecode]

Plan a few trees:

[sourcecode language=”css”]
.trees {
position: absolute;
background: url(img/tree1.png) repeat 0 0;
top: 50%;
left: 50%;
width: 32px;
height: 48px;
}

.trees#t1 { margin: -100px 0 0 300px;}
.trees#t2 { margin: -240px 0 0 -300px;}
.trees#t3 { margin: 110px 0 0 80px;}
[/sourcecode]

And Put this in the body tag under character in index.html

[sourcecode language=”html”]
<div class=”trees” id=”t1″></div>
<div class=”trees” id=”t2″></div>
<div class=”trees” id=”t3″></div>
[/sourcecode]

Finally, I will build a house too, create a house div tag in index.html

[sourcecode language=”html”]
<div id=”house1″></div>
[/sourcecode]

And add the house css code in style.css

[sourcecode language=”css”]
.house {
position: absolute;
z-index: 55;
top: 50%;
left: 50%;
}

#house1 {
background: url(img/house1.png) no-repeat;
width: 200px;
height: 140px;
margin:-130px 0 0 -370px;
}
[/sourcecode]

Let’s also make the house door dark, so it looks more realistic, add a div under the house div:

[sourcecode language=”html”]
<div class=”doorHole” id=”doorHole1″></div>
[/sourcecode]

and put this in style.css

[sourcecode language=”css”]
.doorHole {
background: rgba(0, 0, 0, 0.8);
z-index: 47;
position: absolute;
top: 50%;
left: 50%;
}

#doorHole1 {
width: 40px;
height: 70px;
margin: -65px 0 0 -330px;
}
[/sourcecode]

That’s basically how you would put decorations in the game! Just by creating a div, style it in css (making the position absolute, select image by setting background, position it with margin).

This is what we get at the moment.

3. Walking Boundaries & Obstacles

Currently, the character can walk on the house and tree, that’s WRONG! Plus, you can also walk out of the map, that’s also WRONG!

Therefore I will show you how to setup some rules, so the character movement is constrained to a defined area, for example, 1. it cannot walk on top of the house and trees but only around it, 2. it can’t go beyond the edge of the screen

When we press the arrow key, the character has a new coordinate. We can call a function to check this coordinate before moving the character to the new position. Here is the function:

[sourcecode language=”js”]

//Character Walk Function
function canIwalk(posX, posY) {

// Within walking area – Screen (Walking boundaries)
if((posX < 0 + me.width()/2) ||
(posX > $(window).width() – me.width()/2) ||
(posY < 0 + me.height()/2) ||
(posY > $(window).height() – me.height()/2)){

return false;
}

// regular obstacles (square size)
for (index in obstacles) {

object = $(obstacles[index][“id”]);

obj_left = object.position().left + parseInt(object.css(“margin-left”));
obj_top = object.position().top + parseInt(object.css(“margin-top”));

if((((posX > ( obj_left – me.width()/2 )) &&  (posX < (obj_left + object.width() + me.width()/2))) ) &&
(posY > (obj_top – me.height()/2)) && (posY < (obj_top + object.height() + me.height()/2))){

// Cannot walk here
return false;
}
}

// Okay to walk
return true;
}
[/sourcecode]

Put this function at the end of your script.js file. It basically takes in the new coordinate, newX and newY, checks if the new position is within the screen area, if not, it will return false.

If we are within the screen, we go through an array of registered obstacles, find out the position, height and width, then compare with the new character position.

To register an obstacle, we put an array in $(document).ready(function(), just before me = $(‘#character’);

[sourcecode language=”css”]
obstacles = [
{id:’#house1′},
{id:’#t1′},
{id:’#t2′},
{id:’#t3′}
];
[/sourcecode]

This is simply an array of id of things they you don’t want the character to walk through.

To use this function, we modify where the character is moved, and that is the end of function processWalk(dir)

Modify this line

[sourcecode language=”js”]
me.animate({left:newX, top: newY}, walkSpeed/2);
[/sourcecode]

To

[sourcecode language=”js”]
if(canIwalk(newX, newY)){
me.animate({left:newX, top: newY}, walkSpeed/2);
}
[/sourcecode]

That’s it! Now the character’s walking is restrained to the area that you want! One obvious problem is, when you resize the browser window, your character might be stuck in area outside of your newly reized window.

To resolve this, we can add an event handler in $(document).ready(function() for the resize event.

[sourcecode language=”js”]
$(window).resize(function(){
me.css(‘top’, $(window).height()/2);
me.css(‘left’, $(window).width()/2);
});
[/sourcecode]

So that everytime you resize your window, the character is always put in the middle of the screen! :)

Conclusion

That’s the end of this Pokemon Online Game Theme tutorial. You can now create Animated walking character, and build a 2D gaming space to interact with it. Please let me know if you found an error or bug somewhere.

You can download the source code described above here.

[download completed source code]

I might write some more tutorials for multiple players animated character game so you can play with your friends, and how to create automated walking characters (e.g. monsters or NPC), drop me an message if you are interested or you have any other suggestions.