Pokemon Online Game Theme Walking Character Tutorial

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.

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.

male

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.

pokemon-theme-1

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.

21 thoughts on “Pokemon Online Game Theme Walking Character Tutorial

  1. neolinux

    Is there anyway to become the source of your website “as-is”? I want to edit them and make my new website (ofcourse i will leave the copyright of the design and coding).

    Thank You

    Reply
    1. Alp

      Oscar, really wanna use on my blog.
      I like this theme coz is Pokemon ^.^ but I cant se reply on website or on my mail address from you.
      I understand if you don’t wanna share with me but please specify this subject

      Reply
    2. Oscar Post author

      HI Alp, sorry for the late reply.
      You can download the CSS and JS files of my website by clicking the F12 key on your keyboard.
      Google it if you don’t know how to download.
      thanks
      Oscar

      Reply
      1. Alp

        Hi Oscar

        I try buy can’t make good. I’m not good on HTML or web designer.
        I wanna only use this theme on my blog home page. If you can share finished files, I will be happy.

        Thanks

      2. Oscar Post author

        okay, just press “Ctrl” and “S”, you should be able to save the JS and CSS files on your computer.
        but if you don’t have the HTML skills, i don’t think you can make it work on your site.

      3. Oscar Post author

        okay, sent you the file by email now.
        But it won’t work straight away, the resource URL are still pointing to my domain. I don’t have time to change them.
        hope that helps you develop your own.

      4. Oscar Post author

        you really need to learn how to use Google :)
        The images/JS/CSS files are all on the webiste you can download yourself.
        Go to my website, press F12, Go to “Resource” tab => Frames => Images
        You should have all the images there, save the ones you need.

      5. ALP

        Bro bro bro…
        I downloaded all png images, this no problem for now but I don’t know html :) I try develop for me thank you but why you don’t sent all finished files :(

  2. C

    Hello! I was following this tutorial and for some reason, after I completed it, the character would just stay in place when ever I try to move him. I downloaded the completed source code and replaced the one I wrote down with the one I downloaded and it is the same issue. Please help.

    ~Me

    Reply
  3. SSFeex

    Hey Oscar!
    Great Tutorial, I just have one question (feel free to email me if you like),

    How can I create a 2nd character? That I can switch too with a button like:
    $(‘#button’).click(function(){
    $(‘#character’).replaceWith(‘#character2’);
    });

    What do I need to your JQuery?

    Reply
  4. Coleman

    Admiring the commitment you put into your blog and in
    depth information you provide. It’s great to come across a blog every once in a while that isn’t the
    same old rehashed material. Fantastic read! I’ve bookmarked your site and I’m adding your RSS feeds to my Google account.

    Reply
    1. Oscar

      how to enter pokemon house

      I did a trick here. as you know, a house is a obstacle, you are not supposed to walk on top of it.
      But when defining a house with a door, I break the house down into two blocks, leaving an empty area in the middle (the door) so you can walk on it.

      :-)

      Reply

Leave a Reply

Your email address will not be published. Required fields are marked *

Are you Robot? *

I don't look at blog comments very often (maybe once or twice a week), so if you have any questions related to multirotor please post it on this forum IntoFPV.com... You're likely to get a response from me faster on there.