Html 5 game: 2012

Thursday, 29 March 2012

Animating the Sprites

I was given the task of animating the sprites. For this i would need to set up a HTML5 Document capable of playing canvas. Then afterwards i would need to use Javascript to actually animated the sprites. Set them up and then add the extras such as health bar, hit collisions and game play parameters such as speed and gravity.

This is the HTML5 Basic set up for displaying the game on screen for now

<!DOCTYPE html>
<html lang="en">
<head>

Work In Progress

<meta charset="utf-8" />
<title>HTML5 Canvas Spritesheet Example</title>
<style>
body {
  margin:0;
  padding:0;
  background-color:#000;
}
canvas {
  display:block;
  margin:20px auto 0;
  border:5px #ccc;
  background-image:url(background%201.gif)
}
</style>
</head>

<body>
<canvas id="canvas" width="600" height="400"></canvas>
<script src="sprite_scripts.js"></script>
</body>
</html>

Here is how it looks in a browser for now, it will need further CCS3 styling and the resolutions made need to be bigger and edited to work with all screen sizes and different browsers.

So to put all the stuff on screen i need to use javascript which is the following below

//---------------------------------------------

                    //Player 1

//---------------------------------------------

var canvas, ctx, sprites,
    width = 600,
    height = 400,
    rightKey = false,
    leftKey = false,
    upKey = false,
    downKey = false,
    char1_x = (width / 2) - 25, char1_y = height - 90, char1_w = 87, char1_h = 85,
    char2_x = (width / 2) + 25, char2_y = height - 90, char2_w = 87, char2_h = 85,
    srcX = 10, srcY = 0;

    //Setting up on Screen sprites postion on the page



//---------------------------------------------

function clearCanvas() {
ctx.clearRect(0,0,600,400);
}
function drawchar1() {
if (rightKey) {
    char1_x += 5;
    srcX = 20;
} else if (leftKey) {
    char1_x -= 5;
    srcX = 83;
}
ctx.drawImage(sprites,srcX,srcY,char1_w,char1_h,char1_x,char1_y,char1_w,char1_h);
if (rightKey == false || leftKey == false) {
    srcX = 10;
}
}
function loop() {
clearCanvas();
drawchar1();
drawchar2();
}
function keyDown(e) {
if (e.keyCode == 39) rightKey = true;
else if (e.keyCode == 37) leftKey = true;
else if (e.keyCode == 65) rightKey2 = true;
else if (e.keyCode == 68) leftKey2 = true;
}
function keyUp(e) {
if (e.keyCode == 39) rightKey = false;
else if (e.keyCode == 37) leftKey = false;
else if (e.keyCode == 65) rightKey2 = false;
else if (e.keyCode == 68) leftKey2 = false;
}

//-------------------------------------------

function drawchar2() {
if (rightKey2) {
    char2_x += 5;
    srcX = 20;
} else if (leftKey2) {
    char2_x -= 5;
    srcX = 83;
}
ctx.drawImage(sprites2,srcX,srcY,char2_w,char2_h,char2_x,char2_y,char2_w,char2_h);
if (rightKey2 == false || leftKey2 == false) {
    srcX = 10;
}
}

//Sprite movement on screen

//---------------------------------------------

(function init() {
canvas = document.getElementById('canvas');
ctx = canvas.getContext('2d');
sprites = new Image();
    sprites2 = new Image();
sprites.src = 'characterwalk1.png';
sprites2.src = 'characterwalk2.png';
setInterval(loop, 1000/30);
document.addEventListener('keydown', keyDown, false);
document.addEventListener('keyup', keyUp, false);
})();

//functions including loading

//---------------------------------------------

                //Player 2

//---------------------------------------------

//init();// JavaScript Document

This document needs alot more development. its just the basic set up for now and is only capable of allowing the characters to move around the screen. So far I only have two characters onscreen and the health bar does not work yet .

First set of backgrouds remastered into a more pixel form to resemble older games more better

Friday, 23 March 2012

background development

Thursday, 22 March 2012

Background sets in development

Thursday, 8 March 2012

Making the Sprites

To make the characters we used the sprite method. This involved us taking lots of photos of us moving as we preform different moves such as punch, kick, walk and jump. Each move would have to be photoed to every movement we would make while making a punch or kick for example. Here are a few examples of our photos before turning them into sprites.

Dale

Nik

Tom

After the photos have been taken, they are then read to produce into Sprites. I will be using Adobe Photoshop to achieve this by toning the characters down into cartoons and then pixelating them. And here are the results of that process below.

As you can see we have covered all the basic moves we need to animated our sprites into a fighting game

Wednesday, 15 February 2012

Mockups of the game

We were asked to develop a HTML5 game/ piece of media using the canvas the apply the game online. We looked at an example of a game called Canvas hero that demonstrated how to make HTML5 games using Canvas.

Upon being set this brief i looked towards retro old arcade style games from back in the 90s. Me and my group mates thought instantly to child hood favorites such as beat-em ups. Ones that stand out to memory are Tekken, Street Fighter and Mortal Kombat. With these game styles in mind we had to produce a similar feeling to what they gave when played.

With Mortal Kombat and Street fighter in mind we decided we wanted to make a cartoon fighter game on canvas to resemble those of old. We wanted it to be set were we are based for Uni "Plymouth" so therefore characters will resemble people you will find around Plymouth. And also Backdrops will also resemble areas found in Plymouth.

So first plan was to develop some mockup backgrounds of how the game could look on screen. Because we were using street fighter and mortal kombat themes, we had to go for the cartoony graphical backgrounds... so here is the first set of ideas. I used Adobe Photoshop CS5 to achieve this.

The Backgrounds so far...

Plymouth Bus Station, Royal Parade

Student Union, Plymouth University

Union Street, Old City Centre Trade Street

So with the game in mind, the location in mind, next was the character development in mind. Old games such as Mortal Kombat used sprites to animate their characters. It is a set of drawing that cover every movement the character can do. And when put together into movement it offers a seamless flow of animation for the character directly controlled by the user. Examples of the sprites can be shown on the ones i have created below. The characters i had in mind for Plymouth would cover people found in the different locations i had selected for backdrops. So for example below I have a student whose a fighter which can be found in the SU, Plymouth. Next I have a typical middle aged man that can be found in Union street drinking whose a bit of an Plymouth Argyle football fan.

Characters so far...

Fight scene... example

Html 5 game