CanvasRenderer using incorrect asset from spritesheet

[jake]

I'm attempting to get pixi.js legacy canvas support working, but having an issue with this library. It seems to be ignoring the x,y position within the spritesheet and just displaying from 0,0.

Here is a slimmed down demo exhibiting the issue: https://codepen.io/jacobbijani/pen/XWMBdXr

Here is the code from that link just in case:

import * as PIXI from "https://cdn.skypack.dev/pixi.js-legacy";
import { CanvasTileRenderer, CompositeTilemap } from "https://cdn.skypack.dev/@pixi/tilemap";

if (!PIXI.utils.isWebGLSupported()) {
  console.log('no webgl, registering canvas plugin')
  PIXI.CanvasRenderer.registerPlugin('tilemap', CanvasTileRenderer);
}

// NOTE: `json` variable is defined in HTML tab

var app = new PIXI.Application({
    width: window.innerWidth,
    height: window.innerHeight,
    backgroundColor: 0x2c3e50
});
document.body.appendChild(app.view);

new PIXI.Spritesheet(PIXI.Texture.from('https://thinko-artifacts.s3.amazonaws.com/codepen/tiles-half.png'), json).parse((sheet) => {
  console.log('sheet loaded', sheet);
  
  const tilemap = new CompositeTilemap();
  app.stage.addChild(tilemap);

  tilemap.clear();
  tilemap.tile('vehicle-engine', 0, 0);
  tilemap.tile('vehicle-tractor', 0, 32);
});

In Chrome I see this, which is what is expected:

In Firefox, where I have webgl disabled, I see this:

The red dot is what is at 0,0 of my spritesheet.

Am I doing something wrong, or is this a bug?

[ivanpopelyshev]

OK, found bug, if you want to try fast fix, apply this to your @pixi/tilemap file in node_modules or where is it 7938df8

also, you wont need to register canvas renderer after this

[jake]

thanks for the prompt response! that does seem to work, but it seems i still need the registerPlugin call for it to work.

if I remove the PIXI.CanvasRenderer.registerPlugin('tilemap', CanvasTileRenderer); then I get a separate error I got prior as well (tileAnim is undefined):

when I inspect the breakpoint there, it seems my tileAnim is actually null. presumably since both this.tileAnim is null and renderer.plugins.tilemap.tileAnim is undefined.

perhaps registerPlugin is still just required? or maybe the tileAnim fallback a few lines up is missing something?

[ivanpopelyshev]

oh right because Tilemap doesnt have tileAnim by default... :) Just register it, it costs nothing anyway

[jake]

great! btw, it took me a bit of sleuthing to realize I needed to register that. seems like its only documented in the actual tilemap/src/CanvasTileRenderer.ts source. a section in the readme on "enabling canvas support" might be worthwhile. I'd write it but honestly I'm not sure I have a full enough grasp on how it works just yet :)

[ivanpopelyshev]

Anyway, its fixed in latest release, but still needs to register plugin
thank you for the report!

[jake]

sounds good. when will it be published to npm?

[ivanpopelyshev]

it wasnt? Oh, I just have to call @ShukantPal again. I cant build new version for some reason :(

[jake]

correct, on github and npm the latest version is still 3.2.0

[jake]

@ShukantPal sorry to be annoying, but any update on publishing a new build to npm? hoping to get this integrated in my game upstream.

thanks!

[ShukantPal]

I'll look into this today. Was gone on vacation.

[ShukantPal]

https://github.com/pixijs/tilemap/releases/tag/v3.2.1