Dear community,

I would like to introduce you all to KittieFIGHT; our game built with pixiejs and spine. Its a blockchain game that uses the Ethereum platform and kittens from CryptoKitties collectible platform.

In KittieFIGHT you can fight your collectible cryptoKitties win tokens & ETH. Yes you win cash for scheduling and fighting cryptoKitties collectibles. Then you buy more cute furry #cryptokitties NFT with the cash you earned.

Our website : https://www.kittiefight.io

Follow us on twitter : https://twitter.com/kittiefightHQ

Follow us on Reddit : https://www.reddit.com/r/kittiefight

Blog : https://blog.superdao.io/

Hello Everyone,

I'm doing a game where I have 3 big images overlapped as background, each one has 2560x1440 with transparency.

I have all this images in a  Container and I realized that setting this container to renderable = false make me earn about 30 fps on slow computers.

I was researching about and it looks like the pixi renderer is cleaning the full canvas and drawing this image (which will never change) all the ticks what is slowing down my game.

I have tried with cacheAsBitmap and clearBeforeRender settings but this doesn't solve the problem at all.

Someone had this problem? Could you solve it?.

By the moment I have workarounded this issue setting the transaprency of the Application to true and setting my background with css but I don't think this is the best solution.

Greetings!!

Hi, I'd like to give the users the possibility to turn off antialias at runtime, is there anyway to do it? Changing renderer.options.antialias at runtime does nothing.

I've thought of just refreshing the website with a query parameter when the option is changed, but the game must also run on mobiles (Cordova) where refreshing a website isn't possible.

PS: If it's possible, it would be even better if user could change between native antialias, fxaa, and completely disabled.

Hello,

I'm seeing this behaviour that I can't understand, when applying a tint color to a sprite while using canvas as renderer. Right now for CORS reasons we're forced to use canvas in our app. I say this because in webgl the issue doesn't happen.

The thing is the we're cutting images into stripes and applying a tint to each stripe, but this creates a line between the stripes:

https://codepen.io/rhernando/pen/8fb06d28861d63ca5a6868f88c71f150?editors=0010

Just click the button to apply/remove the tint and you'll see the issue.

Why this happens?, is there a way around this or is just what we get in canvas?

Best,
Rodrigo.

Hi all. My PIXI.js code doesn't render my sprite. What is the problem? I checked the all file directions and all of them are correct. I get just only black screen. Here is my code:

 

let visibleObjects = [];

let pixelDimensionWidth = 1.0;
let pixelDimensionHeight = 1.0;

let Sprite = PIXI.Sprite;
let Application = PIXI.Application;
let Rectangle = PIXI.Rectangle;
let resources = PIXI.loader.resources;
let loader = PIXI.loader;

let player = {};

function getWidth() {
	if(mainContainer != null) {
		return mainContainer.offsetWidth;
	} else {
		return 0;
	}
}

function getHeight() {
	if(mainContainer != null) {
		return mainContainer.offsetWidth / 2;
	} else {
		return 0;
	}
}

function resizeCanvas() {
	if(app != null) {
		app.renderer.resize(getWidth(), getHeight());
		pixelDimensionWidth = mainContainer.offsetWidth/100.0;
		pixelDimensionHeight = mainContainer.offsetHeight/100.0;
	}

	for(let i=0; i<visibleObjects.length; i++) {
		if(visibleObjects[i] != null) {
			if(visibleObjects[i].hasOwnProperty('xPercent') && visibleObjects[i].hasOwnProperty('sprite')) {
				visibleObjects[i].sprite.x = visibleObjects[i].xPercent * pixelDimensionWidth;
			}
			if(visibleObjects[i].hasOwnProperty('yPercent') && visibleObjects[i].hasOwnProperty('sprite')) {
				visibleObjects[i].sprite.y = visibleObjects[i].yPercent * pixelDimensionHeight;	
			}
			if(visibleObjects[i].hasOwnProperty('widthPercent') && visibleObjects[i].hasOwnProperty('sprite')) {
				visibleObjects[i].sprite.width = visibleObjects[i].widthPercent * pixelDimensionWidth;
			}
			if(visibleObjects[i].hasOwnProperty('heightPercent') && visibleObjects[i].hasOwnProperty('sprite')) {
				visibleObjects[i].sprite.height = visibleObjects[i].heightPercent * pixelDimensionHeight;
			}
		}
	}
}

let mainContainer = document.getElementById('main-container');
let canvasContainer = document.getElementById('canvas-container');

let app = new Application({

	width: getWidth(),
	height: getHeight(), 
	antialias: false,
	resolution: 1,
	autoResize: true,

});

canvasContainer.appendChild(app.view);

window.addEventListener("resize", resizeCanvas);

loader
  .add([
    "images/games/test/objects.png",
    "images/games/test/buttons.png",
    "images/games/test/control.png",
  ])
  .load(setup);

function setup() {
	player = {
		id: "player",
		rectangle: new Rectangle(0, 1, 6, 6),
		texture: resources["images/games/test/objects.png"].texture,
		sprite: new Sprite(this.texture),
		xPercent: 50.0,
		yPercent: 50.0,
		widthPercent: 3.0,
		heightPercent: 6.0,
	};

	player.texture.baseTexture.scaleMode = PIXI.SCALE_MODES.NEAREST;
	player.texture.frame = player.rectangle;
	visibleObjects.push(player);
	app.stage.addChild(player.sprite);

	resizeCanvas();

	/*objectCoin = new Sprite(PIXI.loader.resources["/images/games/test/objects.png"].texture);

	buttonTouch = new Sprite(PIXI.loader.resources["/images/games/test/buttons.png"].texture);
	buttonKeyboard = new Sprite(PIXI.loader.resources["/images/games/test/buttons.png"].texture);

	controlLeft = new Sprite(PIXI.loader.resources["/images/games/test/control.png"].texture);
	controlRight = new Sprite(PIXI.loader.resources["/images/games/test/control.png"].texture);
	controlUp = new Sprite(PIXI.loader.resources["/images/games/test/control.png"].texture);
	controlDown = new Sprite(PIXI.loader.resources["/images/games/test/control.png"].texture);*/
}

Thank you. I'm new to the forum by the way.

I'm working on a roguelike which is going to have multiple levels active at once with each level being very large. Think several 64x64 chessboards with only a 8x8 area of one level visible at once. All the demos I've seen are more like a traditional chess game where there's only one level visible and you can see the entire board at once. Ideally, pixi.js would only render ~8x8 area visible, tracking which sprites and animations are active. My approach is as follows:

1. Create a single pixi app with a stage and a view visible to the user.

2. Create a container for each of the boards and containers for each of the pieces (to build composite sprites).

3. Attach the currently visible board container to the main app.stage and change the x, y of the board container to stay centered on the player, eg: app.stage.appendChild(board_container)

4. When the player changes levels remove the old board container and add the new board container.

If every piece (probably hundreds) have update functions connected via piece.container.ticker.add(), will pixi be redrawing the pieces off screen or pieces on board containers that are not attached to the main app? Should I be keeping track of which pieces are visible and adding and removing listeners while showing and hiding sprites when I think they are soon to be on screen? I ask because it seems that pixi.js is extremely well optimized and doing things the pixi.js way will surely give me better results than me unbinding and rebinding things by hand.

A link to a pre-existing app that does something similar would be great. I'm pretty handy at reverse engineering other people's code. Thank you in advance.

Hi,

I'm trying to load 4 images, and then generate array of random sprites, but i get In chrome console:

Debug:

GET http://localhost:8081/dist/symbol_2 404 (Not Found)
BaseTexture.js:795 BaseTexture added to the cache with an id [symbol_1] that already had an entry
addToCache @ BaseTexture.js:795
fromLoader @ Texture.js:478
textureParser @ textureParser.js:9
(anonymous) @ Loader.js:614
(anonymous) @ async.js:35
Texture.js:508 Texture added to the cache with an id [symbol_1] that already had an entry
addToCache @ Texture.js:508
fromLoader @ Texture.js:479
textureParser @ textureParser.js:9
(anonymous) @ Loader.js:614
(anonymous) @ async.js:35
BaseTexture.js:795 BaseTexture added to the cache with an id [symbol_2] that already had an entry
addToCache @ BaseTexture.js:795

My snippet:

import * as PIXI from 'pixi.js'

const symbols = [
    { id: 0, img: PIXI.Texture.fromImage("symbol_1") },
    { id: 1, img: PIXI.Texture.fromImage("symbol_2") },
    { id: 2, img: PIXI.Texture.fromImage("symbol_3") },
    { id: 3, img: PIXI.Texture.fromImage("symbol_4") }
];

export default class Symbol {

    /**
     * Generate random symbol tables
     *
     * @static
     * @param {number} reelsCount
     * @param {number} symbolsCount
     * @param {(symbolTables: Array<any>) => void} resolve
     * @memberof Symbol
     */
    public static generateSymbols(reelsCount: number, symbolsCount: number, resolve: (symbolTables: Array<any>) => void): void {

        
        let symbolTables: Array<any> = new Array<any>();

        for (let i = 0; i < reelsCount; i++) {
            let symbolTable: Array<any> = new Array<any>();

            for (let x = 0; x < symbolsCount; x++) {
                let randomIndex: number = Math.floor(Math.random() * symbols.length);

                let id: number = symbols[randomIndex].id;
                let sprite: PIXI.Sprite = new PIXI.Sprite(symbols[randomIndex].img);

                symbolTable.push({id: id, img: sprite});
            }

            symbolTables.push(symbolTable);
        }

        resolve(symbolTables);
    }
}

So, what's the wrong ? It's caching problem or?

Thanks in advance.

Hi,

    I am trying to display only the text content which is there in pixi example port. Everything is working fine in all the browsers except safari. Earlier it was working fine but from past 2 days it is showing only the white screen. All the assets and sounds are loading in background and I am able to play the sound and all but there is no visibility. Is there any specific reason for this or am I missing something ?. I have added the example script also. Any help will be appreciated. 

Thanks in advance.

var app = new PIXI.Application(800, 600, {backgroundColor: 0x1099bb});
    var element = document.getElementById('gameCanvas');
    element.appendChild(app.view);

    var basicText = new PIXI.Text('Basic text in pixi');
    basicText.x = 30;
    basicText.y = 90;

    app.stage.addChild(basicText);

    var style = new PIXI.TextStyle({
        fontFamily: 'Arial',
        fontSize: 36,
        fontStyle: 'italic',
        fontWeight: 'bold',
        fill: ['#ffffff', '#00ff99'], // gradient
        stroke: '#4a1850',
        strokeThickness: 5,
        dropShadow: true,
        dropShadowColor: '#000000',
        dropShadowBlur: 4,
        dropShadowAngle: Math.PI / 6,
        dropShadowDistance: 6,
        wordWrap: true,
        wordWrapWidth: 440
    });

    var richText = new PIXI.Text('Rich text with a lot of options and across multiple lines', style);
    richText.x = 30;
    richText.y = 180;

    app.stage.addChild(richText);

Suppose I have a PIXI.Text object and I want to use my mouse to select a few letters inside the text like I do in a text input. How can I achieve this? What events should I listen to? Is it "mousedown" and "mouseup"? And then maybe I need to draw a reversed color rectangle around the selected text? Not sure if this works and I wonder how complicate would that be.

Hi,

In my application in need to draw from 1 to 10 000 rectangles on stage.

When I was using graphics I have no problem with rendering, but I had a problem with performance.

I found out that if I would like to put more then 3000 objects on stage I should use sprites, and I did.

However, I have a weird problem with rendering. Borders of spite not always appear.

I recorded quick video what shows how it looks with spirits and then on video I switched to the old version of app where I was using "graphics".

On the video, I am zooming in and out by mouse wheel what change the scale of stage and center stage to the cursor position.

https://www.youtube.com/watch?v=TxzfKsvAGvs&feature=youtu.be

Here how I create the model:

function panelModel({ x, y, id, height, width, groupId, roofZone }): any {
  const { settings: { canvasCenter } } = state();
  const texture = getTexture('panel', width, height, roofZone);
  const panel = new PIXI.Sprite(texture);
  panel.hitArea = new PIXI.Rectangle(0, 0, width, height);
  panel.id = id;
  panel.groupId = groupId;
  panel.interactive = true;
  panel.defaultCursor = 'crosshair';
  panel.pivot.x = width / 2;
  panel.pivot.y = height / 2;
  panel.x = x + canvasCenter.x;
  panel.y = y + canvasCenter.y;
  panel.width = width;
  panel.height = height; 
  return panel;
}

export function panelTexture(width: number, height: number, roofZone: number) {
//  const panelTexture = new PIXI.Graphics();
  // panelTexture.beginFill(5872089);
  // panelTexture.drawRect(0, 0, width, height);

  // const outline = new PIXI.Graphics();
  // outline.lineStyle(1, 0x00000);
  // outline.drawRect(0, 0, width - 0.5, height - 0.5);
  // panelTexture.addChild(outline);
  // panelTexture.endFill();
  // return getRenderer().generateTexture(panelTexture);
  const base = PIXI.BaseTexture.fromImage(require('assets/media/textures/spriteTexture.png'));
  const texture =  new PIXI.Texture(base);
  texture.noFrame = true;
  return texture;
  // return you the texture
}

Before I decided to use sprite I tried to use texture made from graphics. However, I didn't know how to make a correct outline so I ended up with the effect like this:
 

My texture is just PNG image (1920 x 1080) with 20px border inside of it.

So the question is how to render 10 0000 completely the same rectangles but in different positions. (width and height are not going to change)

PS.

Also, I forgot to mention that width and heigh in scale 1:1 is from 1px to 15px with some decimal points.

I cannot change it because rectangles have to reflect the real world sizes on google static map

Best regards

Artur

Hi all, I'm working on a new slot game for mobile, some of the win icons may likely be spine animations, but some may work better as keyframed.  Having them all as spines would be simpler, but if the payoff is worth it, would look at customising each symbol type.
I was just wondering if anyone had done any benchmarking for keyframed animations in spine/pixijs v a traditional pixijs animated sprite?  Any advice greatly appreciated!

I need some tool with a GUI, to make custom positions and containers and export those images as spritesheet.  

Right now, I m trying dragon bones to make that with the armature but I m thinking there is something more specific or light.

Thanks  

Hi, i'm looking to get any solution form resizing the 'game' correctly in desktop and mobile screens but no way. I get the background image (sprite) non centralized and zoomed stage. Anyone can  tell me please what's the wrong?

CSS

body {
    background-color: rgb(0, 0, 0);
    width: 100%;
    height: 100%;
    overflow: hidden;
}

#pixi-canvas {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
}

JS

const logicalWidth = 1280 // window.innerWidth;
const logicalHeight = 720 // window.innerHeight;

// Init Application
let app: PIXI.Application = new PIXI.Application(logicalWidth, logicalHeight, { backgroundColor: 0x2c3e50, roundPixels: true, resolution: window.devicePixelRatio, autoResize: true });

app.view.id = 'pixi-canvas';

// Add canvas to DOM
document.body.appendChild(app.view);

{ ... }

let background: PIXI.Sprite = PIXI.Sprite.fromImage("bg");

rootContainer.addChild(background);
app.stage.addChild(background);

{ ... }

this.resizeHandler(app.stage, app.renderer, logicalHeight, logicalWidth);

window.addEventListener('resize', () => {
	this.resizeHandler(app.stage, app.renderer, logicalHeight, logicalWidth);
});


private resizeHandler(stage: PIXI.Container, renderer: any, logicalHeight: number, logicalWidth: number) {
	const scaleFactor = Math.min(
		window.innerWidth / logicalWidth,
		window.innerHeight / logicalHeight
	);

	let newWidth: number = Math.ceil(logicalWidth * scaleFactor);
	let newHeight: number = Math.ceil(logicalHeight * scaleFactor);

	console.log('size', {w: logicalWidth, h: logicalHeight, newW: newWidth, newH: newHeight, scaleFactor: scaleFactor});

	renderer.resize(newWidth, newHeight);
	stage.scale.set(scaleFactor);
};

RESULT

All the sprite assets for the game I am making are in animated GIF form. There are hundreds. Is there any way to load and play them in PIXI.js without splitting them into individual frame image files first?

Perhaps there is some other library I could use in conjunction with PIXI.js to get these images in?

If not, is there some way I can recursively go through a folder and batch separate all of the GIFs into frame images?

Hi,

I`d like to create an interactive graphics with arc.

var arcGraphics = new PIXI.Graphics();
arcGraphics.lineStyle(30, 0x000000);
arcGraphics.arc(300, 300, 60, 0, Math.PI * 2 / 8);

Using hitArea = arcGraphics.getBounds(), the interactive area and the arc will be too different.

If I use this graphics as a texture of a sprite, the position of the sprite will be different from the original graphics, even if I set the position to (300, 300). How can I position my sprite correctly? Or is there a better way for interactive arc?

Hello,

I have come across a problem with pixi-tilemap.  I created a small application to show this problem off and see if anyone can help me.  It can be viewed on github HERE or seen below:

export class Game {

    app: PIXI.Application;                               // declare the pixi application

    constructor() {

        this.app = new PIXI.Application({backgroundColor: 0x1099bb});     // create the pixi application
        PIXI.loader.add([                                                 // load assets
            'assets/images/terrian-01.json',                              // asset list
            'assets/images/benjiro-01.json'
        ])
            .load(this.loaded.bind(this));                                // loaded() runs after assets are loaded
    }

   loaded() {

        const tilemap = new PIXI.tilemap.CompositeRectTileLayer(0, []);  // can pass textures to this array in second argument, if I do, it does not help anything, but similar results: whichever texture is passed first will appear.  the other texture will not.

        tilemap.addFrame(PIXI.loader.resources['assets/images/terrian-01.json'].textures['terrian-01-287.png'], 64, 0); // a large sign.             will load because it is the first spritesheet to be called with addFrame()
        tilemap.addFrame(PIXI.loader.resources['assets/images/benjiro-01.json'].textures['benjiro-01-181.png'], 0, 0);  // a log with an axe in it.  will not load unless you put this line up one line higher
        tilemap.addFrame(PIXI.loader.resources['assets/images/terrian-01.json'].textures['terrian-01-286.png'], 128, 0); // a small sign.            will load because it is on the same spritesheet as the large sign and it was the first spritesheet to be called

        this.app.stage.addChild(tilemap);
   }
}

I was unable to find any documentation for pixi-tilemap or communities specifically for it so hopefully this is the best place to post for help.

To create a tilemap, I used CompositeRectTileLayer() then addFrame() to add each tile.  I attempted to add 3 tiles to the screen.  First is terrian-01-287 from the terrian-01 spritesheet.  This would be placed at (64, 0).  This successfully places.  The second is benjiro-01-181 from the benjiro-01 spritesheet.  This would be placed at (0, 0), to the left of the first sprite.  It does not appear, but there is no error, the texture is successfully passed to addFrame().  Finally, I add another tile, terrian-01-286, and it succesfully adds.  The result looks like this:

This above picture shows that the texture from terrian-01.json both successfully added to tilemap but the texture from benjiro-01 did not.

In fact if you move the line of code that says addFrame(...benjiro-01...) to be the first to run, you will get this:

In this case, since benjiro-01.json was the first to be sent to addFrame(), it appears.  Neither textures from terrian-01 appear.

It is worth noting that I carefully checked the validity of the textures being passed to addFrame() and found nothing unusual.  Also if I pass the textures in to the second argument when cost tilemap is declared, which ever texture is passed in will load and the other will not (so same problem).

I want to be able to load tiles from multiple resources into the same CompositeRectTileLayer.

Alternatively, I can create a CompositeRectTileLayer for each resource, but it doesn't seem like the ideal solution to the problem.

Am I doing something wrong here?  This doesnt seem to make any sense!  Thank you.  Any help would be great!

I have a .png with a deck of playing cards on it. Unless I missed something, TexturePacker doesn't have a way to build a .json file from an existing sheet where elements have known dimensions.

Therefore, is there an Pixi method to define sprite frames from an existing texture?

Hi,

I am working now with some projects involving Pixi.js

 I have made a quickstart project, with the minimum tooling, in order to start developing with Pixi.js from 0.

It uses Parcel and all its amazing features like Hot Module Reloading.

Highlight features:
- Super fast start
- Hot Module Reloading
- Typescript
- Unit testing

Here is the GitHub link: https://github.com/llorenspujol/parcel-pixijs-quickstarter

Hope can help someone to start a Pixi.js project:)

Hello,

I have 2 questions regarding the optimization on Pixi.js

On this page https://github.com/pixijs/pixi.js/wiki/v4-Performance-Tips

On the Sprite part it says:
Use spritesheets where possible to minimize total textures
Sprites can be batched with up to 16 different textures (dependent on hardware)

I am not sure to understand perfectly the above statement.
So for exemple let says I want to display 40 differents buildings on screen.
In term of performance (rendering) would it be better to have a big PNG file with all those buildings inside (that I can use as Spritesheet) or have 40 png ?

Also I created a fountain water particle using https://github.com/pixijs/pixi-particles
I have 2 foutains Sprite on my screen looking exactly the same with inside each, a Pixi.particles.Emitter for the water.
Is there a way to have some kind of duplicate of the first fountain in order to have only one Pixi.particles.Emitter updating instead of 2.

Thank you so much for your answers.

Best

Hi guys,

Here is I would like to achieve : morphing simple 2D shapes (polygons with like 15/20 vertices) using WebGL. People told me Pixi.js would be a good move to do this, but I don't see how I could achieve that for now (using vertex sharders? trying to render svg paths into webgl? ...)

I'd be glad you had any idea/track to explore to realize that ;)

Thanks,

Evan