Jump to content

Cannot get 'blur' like trail effect in "Interphase Example 5"


Dandibot
 Share

Recommended Posts

I'm trying to follow the Interphase book examples, and I'm stuck at the rendering stage (Example 5, page 76) with an 

Uncaught TypeError: Cannot read property 'drawImage' of null at MyGame.StateA.render (stateA.js:66)

The JS code (copy-paste from the book):

var MyGame = {};
 
MyGame.StateA = function (game) {
 
	this.b = 0;
	this.frames = [];
	this.start = false;
 
	this.sprite = null; 
};
 
 MyGame.StateA.prototype = {
 
     preload: function () {
 
         this.load.image('background', '../assets/wave.jpg');
         this.load.image('phaser', '../assets/phaser.png');
         this.load.image('asuna', '../assets/fairy_dance_asuna_by_vali233.png');
 
     },
 
     create: function () {
 
         //  Create 10 'frames'
         for (var i = 0; i < 10; i++)
         {
             this.frames.push(this.make.bitmapData(game.width, game.height));
         }
 
         this.add.sprite(0, 0, 'background');
 
         this.add.sprite(640, 553, 'phaser');
 
         this.add.text(16, 16, 
             "State Example: preRender", 
             { font: "16px Arial", fill: "#ffffff" });
 
       this.sprite = this.add.sprite(
           this.world.centerX, 
           this.world.centerY, 
           'asuna');
 
         this.sprite.anchor.set(0.5);
 
         this.add.tween(this.sprite.scale).to( 
             { x: 0.2, y: 0.2 }, 
             2000, 
             "Sine.easeInOut", true, 500, -1, true);  
    },

    update: function () {

        this.sprite.rotation += 0.01;
 
     },
 
     preRender: function () {
 
         this.frames[this.b].cls();
         this.frames[this.b].copyRect(
             this.game.canvas, 
             this.world.bounds, 
             0, 0, 0.1
         );
 
         this.b++;
 
         if (this.b === 10)
         {
             this.start = true;
             this.b = 0;
         }
 
     },
 
     render: function () {
 
         if (this.start)
         {
             //  The frame buffer is full, so lets start drawing them back
             for (var i = 0; i < 10; i++)
             {
                 this.game.context.drawImage(this.frames[i].canvas, 0, 0);
             }
         }
 
     }
 
 };

From what I can see, the frames start to render, but stop and throw this error. The "game.context" is null when I check in the console.

EDIT:

As usual I found the answer just after posting. I didn't define a context when I created a new Phaser.Game instance (in the HTML file). 

Problem solved (wish I could delete this post) :|

Edited by Dandibot
Found the solution just after posting
Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
 Share

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...