Jump to content

Trying to create sprites from HTML5 Canvas


Recommended Posts


I'm new to PixiJS, and dont understand what i'm doing wrong. I'm  creating a few canvases red square and green and they try to create sprites from them and add to ParticleContainer. For some reason every sprite have same texture as another, here is exmaple: https://rpginferno.ru/pixi/pixi1.html

I'm creating mapping app for a few years and now, i try to impement Pixi because it's performance. I hope someone can help me with my issue, here is complete code of the page:

<!DOCTYPE html>
<html lang="en">
    <meta charset="UTF-8">
    <script src="https://pixijs.download/v6.0.0/pixi.js"></script>
        <canvas id="cnv1" width="24" height="24"></canvas>
        <canvas id="cnv2" width="24" height="24"></canvas>

    <div id="body1"></div>

  const cnv1 = document.getElementById('cnv1');
  const cnv2 = document.getElementById('cnv2');

  const ctx1 = cnv1.getContext('2d');
  const ctx2 = cnv2.getContext('2d');

  ctx1.fillStyle = 'red';
  ctx1.fillRect(0, 0, 24, 24);

  ctx2.fillStyle = 'green';
  ctx2.fillRect(0, 0, 24, 24);

  const app = new PIXI.Application({
    height: 400,
    backgroundColor: 0xCCCCCC,
    antialias: true

  const sprites = new PIXI.ParticleContainer(100, {
    scale: true,
    position: true,
    rotation: true,
    uvs: true,
    alpha: true,

  const txt1 = PIXI.Texture.from(cnv1);
  const txt2 = PIXI.Texture.from(cnv2);

  const sprite1 = PIXI.Sprite.from(txt1);
  const sprite2 = PIXI.Sprite.from(txt2);


  sprite1.x = 0;
  sprite1.y = 0;
  sprite2.x = 50;
  sprite2.y = 50;




Link to comment
Share on other sites

56 minutes ago, ivan.popelyshev said:

ParticleContainer works only with one texture on all sprites.

Thanks. I think i get it, because the particle container is for the indentical particlesm that is why it may be more effecient with large numbers of sprites. Changed ParticleContainer to simple Container and all works fine. Spent about 1 day to figure it out )))))

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.

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.


  • Recently Browsing   0 members

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