fancyoung

"Cannot read property 'width' of null" error when update v3 to v4

Recommended Posts

When I update pixi.js version v3 to v4, there are some error: 

pixi.js:20965 Uncaught TypeError: Cannot read property 'width' of null
    at CanvasSpriteRenderer.render (pixi.js:20965)
    at Sprite._renderCanvas (pixi.js:20620)
    at Sprite.renderCanvas (pixi.js:9346)
    at Container.renderCanvas (pixi.js:9348)
    at CanvasRenderer.render (pixi.js:16040)

I found out it caused by `var width = texture._frame.width;`, and the `_frame` is null.

But it works fine in v3. I read the `Pixi v4 Migration Guide`, but it seems no relevant.

Share this post


Link to post
Share on other sites
2 hours ago, xerver said:

Can you post a running example of the issue please?

Sorry, it's complex code (otherwise I can debug by myself). 

The error happened in CanvasSpriteRenderer, and I find it's new in v4, is there any suggestion debug this?

The chain is:

viewerRenderer.render(viewerStage);

>

CanvasRenderer.prototype.render = function render(displayObject, renderTexture, clear, transform, skipUpdateTransform) {
...
displayObject.renderCanvas(this);
...
}

>

Container.prototype.renderCanvas = function renderCanvas(renderer) {
...
        for (var i = 0, j = this.children.length; i < j; ++i) {
            this.children[i].renderCanvas(renderer);
        }
...
}

>

Sprite.prototype._renderCanvas = function _renderCanvas(renderer) {
        renderer.plugins[this.pluginName].render(this);
    };

>

 CanvasSpriteRenderer.prototype.render = function render(sprite) {
        var texture = sprite._texture;
        var renderer = this.renderer;

        var width = texture._frame.width;   <<<<<< error here
        var height = texture._frame.height;
...
}

Because the texture is:

baseTexture:null
noFrame:true
orig:null
requiresUpdate:false
transform:null
trim:null
valid:false
_events:Events
_eventsCount:1
_frame:null
_rotate:0
_updateID:0
_uvs:null

 

Share this post


Link to post
Share on other sites

How about this check?

// if baseTexture is null then there's nothing to render, so just return
if (!texture.baseTexture) {
    return;
}

 

Or maybe you need this one?

// if the texture has no frame data then there's nothing to render yet, so just return
if (texture.noFrame) {
    return;
}

 

Share this post


Link to post
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...

  • Recently Browsing   0 members

    No registered users viewing this page.