Character Framework Tutorial

How to use Character Framework

For the HTML Coder

About

For this framework you are creating your own character with a sprite sheet. The character will have 5 individual movements; jump, kick, punch, power, and fly. This character framework can be used as the style of your player in your game application for whenever you are ready to create it.

This framework has 2 main functions. One is the animation of your character where sprite movements are predetermined by you The second is an input box where you can manually adjust the characters placement sprite.

Part 1: Html Code
Create the proper divs for characters
              
               
                 
               
               
Part 2: JavaScript Code
Javascript code initial properties
              
                var myFW1 = new MakeMyFramework();
                
                var animation1obj = new myFW1.MakeMyAnimation1({
                id: "myAnimation1",
                playerName:"WonderWoman",   
                spritePic: 'url("https://image.ibb.co/fS2qJv/ww1sheet.png")', // or 'url("../pics/ww1sheet.png")'
                imgHeight:"60px",
                imgWidth:"50px",
                backgroundPosition: "-180px 0px",
                backgroundRepeat: "no-repeat",
                position:"absolute",
                zIndex: "2",
                top: 550,//where in the page postion
                left: 950,
               
                  
Part 3: JavaScript Code
Javascript code remaining initial properties
               
                    direction:{
                    left:{
                        keyPress:37
                    },
                    right:{
                        keyPress:39
                    },
                    up:{
                        keyPress:38
                    },
                    down:{
                        keyPress:40 
                    },  
                },
                moves: {
                    idle: {
                        keyPress: 13,
                        positionx: -180,
                        positiony: 0
                    },
                    jump: {
                        keyPress: 32,
                        frames:[
                            {
                                positionx: -179,
                                positiony: -120
                            },
                            {
                                positionx: -240,
                                positiony: -120
                            },
                             {
                                positionx: -300,
                                positiony: -115
                            },
                            {
                                positionx: -179,
                                positiony: -170
                            },
                            {
                                positionx: -240,
                                positiony: -170
                            },
                            {
                                positionx: -300,
                                positiony: -179
                            },
                             {
                                positionx: -179,
                                positiony: -228
                            },
                            {
                                positionx: -238,
                                positiony: -230
                            }
                        ]
                    },
                    kick: {
                        keyPress: 75,
                        frames:[
                            {
                                positionx: -179,
                                positiony: -694
                            },
                            {
                                positionx: -240,
                                positiony: -694
                            },
                            {
                                positionx: -300,
                                positiony: -694
                            },
                            {
                                positionx: -182,
                                positiony: -742
                            }
                        ]
                    },
                    punch: {
                        keyPress: 80,
                        frames:[
                            {
                                positionx: -179,
                                positiony: -800
                            },
                            {
                                positionx: -250,
                                positiony: -800
                            },
                             {
                                positionx: -300,
                                positiony: -800
                            },
                            {
                                positionx: -179,
                                positiony: -855
                            }
                        ]
                        
                    },
                    fly: {
                        keyPress: 77,
                        frames:[
                            {
                                positionx: -179,
                                positiony: -340
                            },
                            {
                                positionx: -240,
                                positiony: -340
                            },
                             {
                                positionx: -300,
                                positiony: -340
                            },
                            {
                                positionx: -179,
                                positiony: -400
                            },
                            {
                                positionx: -240,
                                positiony: -400
                            }
                        ]
                    },
                    power: {
                        keyPress: 79,
                        frames:[
                            {
                                positionx: -179,
                                positiony: -915
                            },
                            {
                                positionx: -245,
                                positiony: -915
                            },
                             {
                                positionx: -310,
                                positiony: -915
                            },
                            {
                                positionx: -179,
                                positiony: -981
                            },
                             {
                                positionx: -243,
                                positiony: -981
                            },
                            {
                                positionx: -310,
                                positiony: -981
                            }
                        ]
                    }
                }
          
            });
         
               
               
Part 4: JavaScript Code
Calling FrameWork Methods
              
                animation1obj.animate();
                animation1obj.setButtonSprite();
               
                  

Download

When you are ready to start creating you character download the zip file below. It includes the framework and html file that you can personally modify.

Create your own FrameWork

Section 1: Getting Started

To create this character framework you need two files, index.html and framework.js. For the html we will follow similar steps as the explanations showed above. In section 1 we will get started with creating the visual component of the html where your button and character div will be placed.
Step 1
HTML Divs & Button
                
                    
                 
              

Section 1: Live demo

The link below will display step 1. You will be able to see the div, text box and button style.

Section 2: Setting Styles

In this section we will create the visual component of the character without using css.
Step 2
Declaring new object & properties

                
                    var myFW1 = new MakeMyFramework();
                    var animation1obj = new myFW1.MakeMyAnimation1({
                        id: "myAnimation1",
                        playerName:"WonderWoman",   
                        spritePic: 'url("https://image.ibb.co/fS2qJv/ww1sheet.png")'
                        imgHeight:"60px",
                        imgWidth:"50px",
                        backgroundPosition: "-180px 0px",
                        backgroundRepeat: "no-repeat",
                        position:"absolute",
                        zIndex: "2",
                        top: 550,
                        left: 950
                    });
                 
              
Step 3
Creating framework, object and setting styles.
                
                    function MakeMyFramework() {

                       
                        var myFW = {};

                        var $ = function (idName) {
                            return document.getElementById(idName);
                        };

                        myFW.MakeMyAnimation1 = function (params) {
                        
                            var ani1obj = $(params.id);
                            ani1obj.style.backgroundImage = params.spritePic;
                            ani1obj.style.backgroundPosition = 
                                        params.backgroundPosition;              
                            ani1obj.style.top = params.top +"px";
                            ani1obj.style.left = params.left +"px";
                            ani1obj.style.width = params.imgWidth;
                            ani1obj.style.height = params.imgHeight;
                            ani1obj.style.backgroundRepeat= params.backgroundRepeat; 
                            ani1obj.style.position= params.position;
                            ani1obj.style.zIndex= params.zIndex;

                          return ani1obj;
                        };
                        return myFW;

                    };
                 
              

Section 2: Live Demo

The link below will display step 2-3 in addition to previous steps. You will be able to see the characters initial sprite position, and in this case it is Wonder Woman.

Section 3: Key Press Movements

In this section we will create the key press directional movements of the character.
Step 4
Key press directional movements array
                
              
              direction:{
                    left:{
                        keyPress:65
                    },
                    right:{
                        keyPress:68
                    },
                    up:{
                        keyPress:87
                    },
                    down:{
                        keyPress:83
                    },  
                },
            
                    
              
Step 5
Private variables
                
                        var LEFT = params.direction.left;
                        var RIGHT = params.direction.right;
                        var UP = params.direction.up;
                        var DOWN = params.direction.down;
                        var y = params.top;
                        var x = params.left;
                        var distance = 10;
                 
              
Step 6
Change Image Function
                
                        ani1obj.changeImage = function (dx, dy) {
                            x = x + dx;
                            y = y + dy;
                            ani1obj.style.left = x + "px";
                            ani1obj.style.top = y + "px";
                        };
                
                
Step 7
On Key Press Function
                
                        ani1obj.onKeyPress = function (event) {
                            if (event.keyCode === LEFT.keyPress) {
                                ani1obj.changeImage(-distance, 0);
                                ani1obj.style.transform = "rotateY(180deg)";
                            } else if (event.keyCode === RIGHT.keyPress) {
                                ani1obj.changeImage(distance, 0);
                                ani1obj.style.transform = "rotateY(0deg)";
                            } else if (event.keyCode === UP.keyPress) {
                                ani1obj.changeImage(0, -distance);
                            } else if (event.keyCode === DOWN.keyPress) {
                                ani1obj.changeImage(0, distance);
                            };
                        event.stopPropagation();
                        };
                        window.addEventListener('keydown', ani1obj.onKeyPress, true);

                 
              

Section 3: Live Demo

The link below will display step 4-7 in addition to previous steps. You will be able to move the character using the keyboard keys WASD

Section 4

In this section we will create a function & button that will change the sprite image of the character.
Step 8
Set Sprite Function
                
                    ani1obj.setSprite = function (action) {
                        if (action) {
                            ani1obj.style.backgroundPosition = 
                                    moves[action].positionx + "px " 
                                    + moves[action].positiony + "px";
                        } else {

                            ani1obj.style.backgroundPosition = $("bgX1").value 
                                                + "px " + $("bgY1").value + "px";
                            
                        }
                    };
                 
              
Step 9
Modifying HTML
                
                    
                 
              

Section 4 Demo

The link below will display step 8-9 in addition to previous steps. You will be able to move the character sprite sheet by typing in x and y text box and then pressing the button.

Section 5

In this section we will create and animation movement indicated by multiple sprite sets.
Step 10
                
                    moves: {
                    idle: {
                        keyPress: 13,
                        positionx: -180,
                        positiony: 0
                    },
                    jump: {
                        keyPress: 32,
                        frames:[
                            {
                                positionx: -179,
                                positiony: -120
                            },
                            {
                                positionx: -240,
                                positiony: -120
                            },
                             {
                                positionx: -300,
                                positiony: -115
                            },
                            {
                                positionx: -179,
                                positiony: -170
                            },
                            {
                                positionx: -240,
                                positiony: -170
                            },
                            {
                                positionx: -300,
                                positiony: -179
                            },
                             {
                                positionx: -179,
                                positiony: -228
                            },
                            {
                                positionx: -238,
                                positiony: -230
                            }
                        ]
                    },
                    kick: {
                        keyPress: 75,
                        frames:[
                            {
                                positionx: -179,
                                positiony: -694
                            },
                            {
                                positionx: -240,
                                positiony: -694
                            },
                            {
                                positionx: -300,
                                positiony: -694
                            },
                            {
                                positionx: -182,
                                positiony: -742
                            }
                        ]
                    },
                    punch: {
                        keyPress: 80,
                        frames:[
                            {
                                positionx: -179,
                                positiony: -800
                            },
                            {
                                positionx: -250,
                                positiony: -800
                            },
                             {
                                positionx: -300,
                                positiony: -800
                            },
                            {
                                positionx: -179,
                                positiony: -855
                            }
                        ]
                        
                    },
                    fly: {
                        keyPress: 77,
                        frames:[
                            {
                                positionx: -179,
                                positiony: -340
                            },
                            {
                                positionx: -240,
                                positiony: -340
                            },
                             {
                                positionx: -300,
                                positiony: -340
                            },
                            {
                                positionx: -179,
                                positiony: -400
                            },
                            {
                                positionx: -240,
                                positiony: -400
                            }
                        ]
                    },
                    power: {
                        keyPress: 79,
                        frames:[
                            {
                                positionx: -179,
                                positiony: -915
                            },
                            {
                                positionx: -245,
                                positiony: -915
                            },
                             {
                                positionx: -310,
                                positiony: -915
                            },
                            {
                                positionx: -179,
                                positiony: -981
                            },
                             {
                                positionx: -243,
                                positiony: -981
                            },
                            {
                                positionx: -310,
                                positiony: -981
                            }
                        ]
                    }
                }
          
            });
                 
              
Step 11
Moves Key Press
                
                    var moves = params.moves;
                    var SPACE = moves.jump.keyPress;
                    var KICK = moves.kick.keyPress;
                    var PUNCH = moves.punch.keyPress;
                    var POWER = moves.power.keyPress;
                    var FLY = moves.fly.keyPress;
                    var IDLE = moves.idle.keyPress;
                 
              
Step 12
setFrame function
                
                    ani1obj.setFrame = function(i, action) {
                        setTimeout(function() {
                          ani1obj.style.backgroundPosition =
                          moves[action].frames[i].positionx + "px " 
                          + moves[action].frames[i].positiony + "px";
                        }, 300 * i);
                  };
                 
              
Step 13
Animation function
                
                    ani1obj.animate = function(action) {
                        for (var i = 0; i < moves[action].frames.length; i++) {
                          ani1obj.setFrame(i, action);
                        };
                  };
                 
              
Step 14
Modifying On Key Press
                
                    ani1obj.onKeyPress = function(event) {
                    if (event.keyCode === LEFT.keyPress) {
                      ani1obj.changeImage(-distance, 0);
                      ani1obj.style.transform = "rotateY(180deg)";
                    } else if (event.keyCode === RIGHT.keyPress) {
                      ani1obj.changeImage(distance, 0);
                      ani1obj.style.transform = "rotateY(0deg)";
                    } else if (event.keyCode === UP.keyPress) {
                      ani1obj.changeImage(0, -distance);
                    } else if (event.keyCode === DOWN.keyPress) {
                      ani1obj.changeImage(0, distance);
                    } else if (event.keyCode === SPACE) {
                      ani1obj.animate("jump");
                    } else if (event.keyCode === KICK) {
                      ani1obj.animate("kick");
                    } else if (event.keyCode === PUNCH) {
                      ani1obj.animate("punch");
                    } else if (event.keyCode === POWER) {
                      ani1obj.animate("power");
                    } else if (event.keyCode === FLY) {
                      ani1obj.animate("fly");
                    } else if (event.keyCode === IDLE) {
                      ani1obj.setSprite("idle");
                    };
                        event.stopPropagation();
                  };
                 
              
Step 15
Calling Functions
                
                    animation1obj.animate();
                    animation1obj.setSprite();
                 
              

Section 5 Demo

The link below will display step 10-15 in addition to previous steps. You will be able to see the action of a movement through the character sprite animation sheet by pressing P for example for punch.

Conclusion

Summary

This tutorial provided HTML coders the ability to use the character framework for creating their own character. This tutorial also gives the ability for users to create their own FrameWork by creating key press, setSprite, and animation functions.

References

The references used in this lab was my Lab 3 javascript framework
Lab 3

Ideas to set sprite sets, sallyk tutorials_js
Set sprite

The references used to move sprite, sallyk tutorials_js
Moving sprite

The references used to understand setTimeOut
Timeout

The references used to use keypress, sallyk tutorials_js
Keypress