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.
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.
21 comments
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
can you try download the javascript and HTML codes from the page?
help i got the completed one and i want to know how to play
Hi Oscar
Can you share all finished code? I wanna use on my blog home page
Thanks and waiting answer
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
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
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
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.
If you can sent codes I can do it but this way is not complete and not smooth.. Only scattered codes bro.
Hi Oscar
Still I want it, why you don’t share?
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.
Hi Oscar
Thank you very much but this .zip is don’t have .png files, Only have html codes.
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.
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 :(
Okay, Thanks for permission to use on my website.
I solved all problem, now working very well.
That’s good! :D
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
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?
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.
Hello,
I really enjoyed this little tutorial, I do have one question: How do I make the character enter the 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.
:-)