Create a Game Character With HTML5 and JavaScript - Part 1 { William Malone }

7/28/2019 Create a Game Character With HTML5 and JavaScript - Part 1 { William Malone }

http://slidepdf.com/reader/full/create-a-game-character-with-html5-and-javascript-part-1-william-malone 1/14

by William Malone

In Part 1 of this series we will design a game character from scratch. We will start with a drawing on paper and with the help of JavaScript we will create a

breathing, blinking character on HTML5 canvas. Hopefully by the end of Part 1 you will have the tools and inspiration to create a character of your own.

Character Abilities

Blink

First we start with an idea. For this character I chose to draw him on paper first. I wanted him to be very simple with few details (e.g. nose, mouth). Although

I did not skimp on head size.

Create a Game Character with HTML5 and JavaScript - Part 1 { William Malone } http://www.williammalone.com/articles/create-html5-canvas-javascript-game-character/1/

1 de 14 29/05/2013 12:10



The next step is to get our idea to pixels. In this case since I had a drawing, I scanned it in and outlined the drawing in Adobe Illustrator. I chose varying

outline thickeness, thicker around the edges of body parts and thinner for the details. Also somehow during the process his head got even bigger.

Next we color in the outlines. Keeping the design simple I chose one solid colors per body part, with an additional shade as a highlight color for added detail.


2 de 14 29/05/2013 12:10



We are creating a dynamic character so we create our character in distinct parts. For our example we keep it simple and segment our character into six parts:

Head

Hair

Torso

Legs

Left ArmRight Arm

Each part is saved as a seperate png image. We will be drawing parts on top of one another so we save each one with a transparent background.


3 de 14 29/05/2013 12:10

C t G Ch t ith HTML5 d J S i t P t 1 { Willi M l } htt // illi l / ti l / t ht l5 j i t h t /1/



With the design of our character complete and in the form of six images, we start the process putting our character on canvas. The first step of that process is

to load those images using JavaScript.

var i mages = {};

l oadI mage( "l ef t Ar m") ;l oadI mage( "l egs" ) ;l oadI mage( "t or so") ;l oadI mage( "r i ght Ar m") ;l oadI mage( "head" ) ;l oadI mage( "hai r " ) ;

f unct i on l oadI mage(name) {

i mages[ name] = new I mage( ) ;i mages[ name] . onl oad = f unct i on( ) {

r esour ceLoaded( ) ;}i mages[ name] . sr c = " i mages/ " + name + " . png" ;

}

First we create a new object to hold our image references called i mages. Next we load each of our character parts via the l oadI mage function with the

parameter corresponding to the part name (e.g. leftArm, legs, etc.). The l oadI mage function creates a new image object pointing to an image with the

filename of the part name with the extension ".png" and in the folder "images". It also assigns an onload method to each image so when the image is loaded

into memory it will caled the function r esour ceLoaded.

We want to know when all of the images are loaded so we can begin drawing.

var t ot al Resources = 6;var numResour cesLoaded = 0;var f ps = 30;

f unct i on r esour ceLoaded( ) {

numResour cesLoaded += 1;i f ( numResourcesLoaded === t ot al Resources) {

set I nt er val ( r edr aw, 1000 / f ps) ;}}


4 de 14 29/05/2013 12:10

Create a Game Character with HTML5 and JavaScript Part 1 { William Malone } http://www williammalone com/articles/create html5 canvas javascript game character/1/



We create a couple variables to track the image load process: t ot al Resour ces and numResour cesLoaded. The r esour ceLoaded function increments the

number of images that have been loaded. When all the images are ready we start a timer using set I nt er val that will call the r edr awfunction 30 times a

second.

During the redraw process the canvas will be cleared and all parts will be redrawn. The order of that process is important. We first draw the the parts farthestaway such as the left arm that will be covered up by our character's legs and torso.

We need access to the HTML5 canvas context that we will draw on. For more information on how to access the canvas' context (and a workaround for IE)refer to HTML5 Canvas Example (http://www.williammalone.com/articles/html5-canvas-example/).

var cont ext = document . get El ement ByI d( ' canvas' ) . get Cont ext ( "2d") ;

Layer by layer, each body part's image is positioned and then drawn on an HTML5 canvas.

var char X = 245;

var char Y = 185; f unct i on r edr aw( ) {


5 de 14 29/05/2013 12:10

Create a Game Character with HTML5 and JavaScript Part 1 { William Malone } http://www williammalone com/articles/create html5 canvas javascript game character/1/



var x = char X;var y = charY;

canvas. wi dt h = canvas. wi dt h; / / cl ears t he canvas

cont ext . dr awI mage( i mages[ " l ef t Ar m"] , x + 40, y - 42) ;cont ext. dr awI mage( i mages[ "l egs" ] , x, y);cont ext. dr awI mage( i mages[ "t or so"] , x, y - 50) ;cont ext . dr awI mage( i mages[ "r i ght Ar m"] , x - 15, y - 42) ;cont ext . dr awI mage( i mages[ "head"] , x - 10, y - 125) ;cont ext. dr awI mage( i mages[ "hai r "] , x - 37, y - 138) ;

}

Before drawing anything we first clear the canvas using theweird

assignment canvas. wi dt h = canvas. wi dt h. Then we draw each image using the contextdr awI mage method specifying three parameters: the image reference, its x position, its y position. The image positions are relative to the canvas' top left hand

corner.

Here is what the canvas looks like so far:

Something's missing...

To add the eyes we are going to draw two ovals. We could have added the eyes to the eyes to the head image, but we want them to be dynamic to enable our

first behavior: blinking.


6 de 14 29/05/2013 12:10

Create a Game Character with HTML5 and JavaScript - Part 1 { William Malone } http://www williammalone com/articles/create-html5-canvas-javascript-game-character/1/



We call a dr awEl l i pse function for each eye at the end of the r edr awfunction. We want them on top of all the other body part images.

f unct i on r edr aw( ) {. . .dr awEl l i pse( x + 47, y - 68, 8, 14) ; / / Lef t Eyedr awEl l i pse( x + 58, y - 68, 8, 14) ; / / Ri ght Eye

}

The dr awEl l i pse takes four parameters specifying the position and dimensions of the ellipse. For more information on the dr awEl l i pse function see the

brief: How to draw an ellipse on HTML5 Canvas (http://www.williammalone.com/briefs/how-to-draw-ellipse-html5-canvas/).

f unct i on dr awEl l i pse( cent er X, cent er Y, wi dt h, hei ght ) {

cont ext. begi nPat h( ) ;

cont ext . moveTo(cent erX, cent er Y - hei ght / 2) ;

cont ext . bezi er Cur veTo(cent er X + wi dt h/ 2, cent er Y - hei ght / 2,cent erX + wi dt h/ 2, cent erY + hei ght / 2,cent er X, cent er Y + hei ght / 2) ;

cont ext . bezi er Cur veTo(cent er X - wi dt h/ 2, cent er Y + hei ght / 2,

cent er X - wi dt h/ 2, cent er Y - hei ght / 2,cent er X, cent er Y - hei ght / 2) ;

cont ext . f i l l St yl e = "bl ack";cont ext . f i l l ( ) ;cont ext . cl osePat h( ) ;

}

Create a Game Character with HTML5 and JavaScript Part 1 { William Malone } http://www.williammalone.com/articles/create html5 canvas javascript game character/1/

7 de 14 29/05/2013 12:10




Our character matches our original digital version minus the shadow.

We create the shadow with one oval at our characters feet.

f unct i on r edr aw( ) {

. . .canvas. wi dt h = canvas. wi dt h; / / cl ears t he canvas

dr awEl l i pse( x + 40, y + 29, 160, 6) ;. . .

}

We want the shadow behind all the other image layers sp an ellipse is drawn at the beginning of the r edr awfunction.

C ea e a Ga e C a ac e w 5 a d JavaSc p a { W a a o e } p://www.w a a o e.co /a c es/c ea e 5 ca vas javasc p ga e c a ac e / /

8 de 14 29/05/2013 12:10




Now we have on HTML5 canvas what we had with a drawing program. Remember, the HTML5 canvas is dynamic. Let's make use of that.

var br eat hI nc = 0. 1;var breat hDi r = 1;

var breat hAmt = 0;var breat hMax = 2;var br eat hI nt er val = set I nt er val ( updat eBr eat h, 1000 / f ps) ;

f unct i on updat eBr eat h( ) {

i f ( br eat hDi r === 1) { / / br eat h i nbreat hAmt - = breat hI nc;i f ( br eat hAmt < - breathMax) {

breathDi r = - 1;}} el se { / / br eat h out

breat hAmt += breat hI nc;i f ( breat hAmt > breat hMax) {

breat hDi r = 1;}

}}

The updat eBr eat h function increases or decreases the breath amount. Once the breath reaches it maximum it changes the breath direction. Breath in, breath

out.

p { } p j p g

9 de 14 29/05/2013 12:10




The purpose of this process is to update the variable br eat hAmt which we will use to represent the constant breathing of our character in the form of a subtle

rise and fall of the head and arms.

To breath life into our static pile of images, we turn to our r edr awfunction. We the help or the variable br eat hAmt we vary the vertical position of certain

body part images.f unct i on r edr aw( ) {

canvas. wi dt h = canvas. wi dt h; / / cl ears t he canvas

dr awEl l i pse( x + 40, y + 29, 160 - br eat hAmt , 6) ; / / Shadow

cont ext . dr awI mage( i mages[ " l ef t Ar m"] , x + 40, y - 42 - br eat hAmt ) ;cont ext. dr awI mage( i mages[ "l egs" ] , x, y);cont ext. dr awI mage( i mages[ "t or so"] , x, y - 50) ;cont ext . dr awI mage( i mages[ "head"] , x - 10, y - 125 - br eat hAmt ) ;cont ext . dr awI mage( i mages[ "hai r " ] , x - 37, y - 138 - br eathAmt ) ;cont ext . dr awI mage( i mages[ "r i ght Ar m"] , x - 15, y - 42 - br eat hAmt ) ;

dr awEl l i pse( x + 47, y - 68 - br eat hAmt , 8, 14) ; / / Lef t Eyedr awEl l i pse( x + 58, y - 68 - br eat hAmt , 8, 14) ; / / Ri ght Eye

}

We subtract the vertical location by value of the variable br eat hAmt for all the pieces we want to oscillate. The shadow will reflect this vertical motion in a

change in width.

10 de 14 29/05/2013 12:10




The time has come for our first behavior of this series. After a given amount of time we will make our character blink.

var maxEyeHei ght = 14;var cur EyeHei ght = maxEyeHei ght ;var eyeOpenTi me = 0;var t i meBt wBl i nks = 4000;var bl i nkUpdat eTi me = 200;var bl i nkTi mer = set I nt er val ( updat eBl i nk, bl i nkUpdat eTi me) ;

We added several globals:

maxEyeHei ght : Eye height when our character eyes are wide open.

cur EyeHei ght : Current eye height while blinking.

eyeOpenTi me: Milliseconds since last blink.

t i meBt wBl i nks: Milliseconds between blinks.

bl i nkUpdat eTi me: Milliseconds before updating blink status.

bl i nkTi mer : Calls the updat eBl i nk function every bl i nkUpdat eTi me milliseconds.

Update the r edr awfunction so the height corresponds with the new variable cur EyeHei ght

f unct i on r edr aw( ) {. . .dr awEl l i pse(x + 47, y - 68 - br eat hAmt , 8, cur EyeHei ght ) ;dr awEl l i pse(x + 58, y - 68 - br eat hAmt , 8, cur EyeHei ght ) ;

}

Every few moments we check to see if its time to blink.

f unct i on updat eBl i nk() {

eyeOpenTi me += bl i nkUpdateTi me;

11 de 14 29/05/2013 12:10




i f ( eyeOpenTi me >= t i meBt wBl i nks) {bl i nk( ) ;

}}

f uncti on bl i nk( ) {

curEyeHei ght - = 1;i f ( curEyeHei ght <= 0) {

eyeOpenTi me = 0;cur EyeHei ght = maxEyeHei ght ;

} el se {set Ti meout ( bl i nk, 10) ;

}}

When the updateBl i nk function is called the eye open time is updated by increasing the variable eyeOpenTi me. If the eye open time is greater than the

t i meBt wBl i nks value we begin blinking by calling the bl i nk function. The bl i nk function will decrement the current eye height until reaching zero. When

the eyes are closed we set the eye height to maximum and reset the eye open time.

Here is a working example. The example code is available for download below.

Character Abilities

12 de 14 29/05/2013 12:10




Blink

Now try creating your own character. Download the source code below and edit the six provided images to make them your own. For example, I tweaked theimages just a bit and made our character a zombie:

Character Abilities

Blink

In Part 2 of the series will give our character the ability to jump.

13 de 14 29/05/2013 12:10




Download HTML5 Canvas Game Character (zip format): html5-canvas-drawing-app-1.zip

HTML5 Sprite Animation Tutorial (http://www.williammalone.com/articles/create-html5-canvas-javascript-sprite-animation)

Create HTML5 Drawing App (http://www.williammalone.com/articles/create-html5-canvas-javascript-drawing-app)

HTML5 Canvas Example (http://www.williammalone.com/articles/html5-canvas-example)

95

This site williammalone.com (http://www.williammalone.com) and its contents copyright (http://creativecommons.org/licenses/by-sa/3.0/) © 2012 William Malone

(http://www.williammalone.com/about/). It is not affiliated with, sponsored by, or endorsed by any entity other than yours truely: William Malone (http://www.williammalone.com

/about/).

14 de 14 29/05/2013 12:10

Create a Game Character With HTML5 and JavaScript - Part 1 { William Malone }

Documents