Phaser bitmapData

In this example below you will see how to do a Phaser bitmapData with some HTML / CSS and Javascript

How to create custom sprites using the BitmapData class

Thumbnail
This awesome code was written by _alvin, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright _alvin ©
  • HTML
  • JavaScript
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>Phaser bitmapData</title>
  
  
  
  
  
</head>

<body>

  
  <script src='http://alvinsight.com/Phaser/phaser.min.js'></script>

  

    <script  src="js/index.js"></script>




</body>

</html>

/*Downloaded from https://www.codeseek.co/_alvin/phaser-bitmapdata-aAoBn */
// A simple Phaser template

var game = new Phaser.Game(800, 600, Phaser.CANVAS, '', { preload: preload, create: create });

function preload(){
 
}

function create(){


 // creates the BitmapData object
  bmd = game.add.bitmapData(80,80);
  // bmd.context is the drawing context
  bmd.context.fillStyle = 'rgb(127,0,0)';
  // draws a full circle
  bmd.context.beginPath();
  

  bmd.context.arc(40,40,35,0,Math.PI*2,false);

  bmd.context.fill();

  bmd.context.closePath();

  // use the bitmpaData as a texture for your sprite !
  var redCircle = game.add.image(0,0,bmd);


}

Comments