Phaser bitmapData

How to create custom sprites using the BitmapData class

<!DOCTYPE html>
<html >
  <meta charset="UTF-8">
  <title>Phaser bitmapData</title>

  <script src=''></script>

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

/* Downloaded from */
/* Downloaded from */
// 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




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


This awesome code ( Phaser bitmapData ) is write by Alvin, you can se more from this user in the personal repository

You can find the original code on

2018 © Alvin