How to draw a Nose….

Advertisements

How to draw an Eye….

How to Draw Realistic Eyes :

Introduction to CraftyJS : Event Triggering


// When the DOM has loaded
$(document).ready(function() {

// Height and Width
var WIDTH = 500, HEIGHT = 320;

// Initialize Crafty
Crafty.init(WIDTH, HEIGHT);

// Background
Crafty.background("black");

// Create a player entity
var player1 = Crafty.e();

// Add some components to the entity
player1.addComponent("2D, DOM ,Mouse");

player1.attr({ x:20, y: 150, w:50, h:50 });

player1.addComponent("Color").color("red");

player1.bind("Click", function(e) {
alert('red');
Crafty.trigger('Myevent');
});

var player2 = Crafty.e();

// Add some components to the entity
player2.addComponent("2D, DOM ,Mouse");

player2.attr({ x:430, y: 150, w:50, h:50 });

player2.addComponent("Color").color("white");

player2.bind("Myevent", function(e) {
alert('white');
});

});

Introduction to CraftyJS : Detecting Mouse and Keyboard Events

  • Mouse Events

// When the DOM has loaded
$(document).ready(function() {

// Height and Width
 var WIDTH = 500, HEIGHT = 320;

// Initialize Crafty
 Crafty.init(WIDTH, HEIGHT);

// Background
 Crafty.background("black");

// Create a player entity
 var player = Crafty.e();

// Add some components to the entity
 player.addComponent("2D, DOM");

player.attr({
 x : 220,
 y : 120,
 w : 50,
 h : 50
 });

player.addComponent("Color").color("red");

//add mouse component for mouse events
 player.addComponent("Mouse");

 player.bind('Click', function(e) {
 alert("Clicked");
 });
});

  • KeyBoard Events

// When the DOM has loaded
$(document).ready(function() {

// Height and Width
var WIDTH = 500, HEIGHT = 320;

// Initialize Crafty
Crafty.init(WIDTH, HEIGHT);

// Background
Crafty.background("black");

// Create a player entity
var player = Crafty.e();

// Add some components to the entity
player.addComponent("2D, DOM");

player.attr({ x:20, y: 20, w:50, h:50 });

player.addComponent("Color").color("red");

player.bind('KeyDown', function(e) {
if(e.key == Crafty.keys['LEFT_ARROW']) {
this.x=this.x-5;
} else if (e.key == Crafty.keys['RIGHT_ARROW']) {
this.x=this.x+5;
} else if (e.key == Crafty.keys['UP_ARROW']) {
this.y=this.y-5;
} else if (e.key == Crafty.keys['DOWN_ARROW']) {
this.y=this.y+5;
}
});

});

Introduction to CraftyJS : Movement in Crafty

  • Where are you running to?

    In Crafty there are a few distinct predefined movement options:

      • Twoway
      • Fourway
      • Multiway
      • No way?

    Twoway and Fourway are built using Multiway, one of the good sides of compinents!

Twoway

.twoway(Number speed[, Number jumpSpeed])

  • speed – Movement speed of the entity (in pixels)
  • jumpSpeed – Jump speed of the entity (in pixels)

W, A and D or Up, Left and Right arrow.

Fourway

.fourway(Number speed)

  • speed – Movement speed of the entity (in pixels)

W, S, A and D or Up, Down, Left and Right arrow.

Multiway

.multiway([Number speed,] Object keyBindings )

  • speed – Movement speed of the entity (in pixels)
  • keyBindings – Binds a key to a direction, the direction is specified in degrees (in pixels)

Examples:

this.multiway(3, {UP_ARROW: -90, DOWN_ARROW: 90,
RIGHT_ARROW: 0, LEFT_ARROW: 180});
this.multiway({x:3,y:1.5}, {UP_ARROW: -90, DOWN_ARROW: 90,
RIGHT_ARROW: 0, LEFT_ARROW: 180});
this.multiway({W: -90, S: 90, D: 0, A: 180});

  • Code example fourway
</pre>
// When the DOM has loaded

$(document).ready(function() {

var WIDTH = 800, HEIGHT = 640;

// Initialize Crafty
 Crafty.init(WIDTH, HEIGHT);

Crafty.background("black");

// Create a player entity
 var player = Crafty.e();

// Add some components to the entity
 player.addComponent("2D, DOM");

player.attr({
 x : 0,
 y : 0,
 w : 50,
 h : 50
 });

player.addComponent("Color").color("red");

player.addComponent("Fourway").fourway(5);

});
<pre>

Introduction to CraftyJS : Entity Component System

  • Rather than having a long hierarchy of inheritance, Crafty uses the Entity-Component paradigm or data oriented.  Basically, every game object is an entity and every bit of functionality is a component. All you need to do to give your entities (or game objects) functionality is to assign some components.
  • Crafty provides a system very similar to what is known as mixins, multiple inheritance or traits depending on the specific language. An easy way to think about this is that an entity (like say the player or an enemy) is composed of many reusable components that enhance the entity with some new functionality. One way to add components to an entity is to call Crafty.e(string) which will create a new entity with the functionality provided by the comma-separated list of components specified in the string parameter.
  • Components

    Components are just objects that contain properties and methods and once attached to an entity, extend the functionality of that entity. Note, many components can be applied to many entities (a many to many relationship).

    • Define attributes
    • Define methods
    • Define events
    • Can have/require other components
    • Used to extend entities
  • Entities

    First and foremost, every object in the game is an entity; pure and simple. As soon as you want these entities to do something, then we need components.

    • Has an ID
    • Has components
  • Code example

    // When the DOM has loaded
    $(document).ready(function() {
    
    // Height and Width
     var WIDTH = 500, HEIGHT = 320;
    
    // Initialize Crafty
     Crafty.init(WIDTH, HEIGHT);
    
    // Background
     Crafty.background("black");
    
    //Define a component
     Crafty.c("MyBox", {
     init : function() {
     // Add code for some default behaviour
     },
     posit : function(xAxis, yAxis, height, width) {
     this.x = xAxis;
     this.y = yAxis;
     this.h = height;
     this.w = width;
     }
     });
    
     //Define entity 1 with component MyBox
     var objBox1 = Crafty.e("2D, DOM");
     objBox1.addComponent("MyBox").posit(10,10,100,480);
     objBox1.addComponent("Color").color("red");
    
     //Define entity 2 with component MyBox
     var objBox2 = Crafty.e("2D, DOM");
     objBox2.addComponent("MyBox").posit(10,110,100,480);
     objBox2.addComponent("Color").color("white");
    
     //Define entity 3 with component MyBox
     var objBox3 = Crafty.e("2D, DOM");
     objBox3.addComponent("MyBox").posit(10,210,100,480);
     objBox3.addComponent("Color").color("green");
    });
    

Introduction to CraftyJS : Initilization ( DOM vs Canvas)

  • Crafty is a JavaScript game engine to help you develop games for the browser (and not just the new ones). With a modular design,using reusable components.
  • First you need to grab the latest release of the crafty engine.(http://www.craftyjs.com/)
  • To make a Crafty Game work in the Browser, you need an HTML file that loads the JavaScript. In its most simple form it will look like this:
</pre>
<!DOCTYPE html>
<html>
<head>
<title>My Awesome Game</title>
<script src="jquery-1.8.2.js" type="text/javascript"></script>
<script src="crafty.js" type="text/javascript"></script>
<script src="gameEntityComponent.js" type="text/javascript"></script>
</head>
<body>
</body>
</html>

  • jquery-1.8.2.js is the javaScript file for jQuery framework.
  • crafty.js is the downloaded javaScript for crafty.
  • game.js is our javaScript file for game.

Our game.js file will look something like this :

// When the DOM has loaded
$(document).ready(function() {// Height and Width
var WIDTH = 800, HEIGHT = 640;

// Initialize Crafty
Crafty.init(WIDTH, HEIGHT);

// Background
Crafty.background("black");

});
  • We want the code to be executed when the page loads, which is done by wrapping the game in $(document).ready function of jQuery.
  • Crafty.init(width, height) is where Crafty does it’s initialization stuff that is needed before the game can run.
  • There are two ways of getting images onto the screen:
    • Using a canvas element that is like a big square of screen estate that you get to draw pixels on or
    • using normal DOM elements that you can manipulate using css and javascript but is drawn to the screen by the browser.
  • It turns out that the DOM method is fastest in most cases.
  • If we want to use canvas you need to call Crafty.canvas.init() like below :
// When the DOM has loaded
$(document).ready(function() {

//Height and Width
 var WIDTH = 800, HEIGHT = 640;

// Initialize Crafty
 Crafty.init(WIDTH, HEIGHT);
 Crafty.canvas.init();

//Background
 Crafty.background("black");

});
  • Crafty abstracts away most differences between DOM and canvas, so it is a matter of changing a single variable if you decide to change later.