Search the Community

I'm totally new to pixijs and to game development in general. I need a help in fixing this error in devices that use canvas if webGL is not available. Im using projection plugin and it is seems like the error is from projection.sprite2d. I am researching about the issue and found PIXI.CanvasRenderer.registerPlugin but don't know how to use it. please help I'm stuck with this issue. TIA

Hey guys! I've got one main question, with a few follow ups.. here goes I was wondering if there was a way draw an image onto the PIXI.Graphics (object thingy)? I'm aware I can add sprites to the stage and other containers. But I'm currently drawing polygons, and images (with a dynamic render order), So this seems like a good way to do that. Is there a way of doing this, similar to the plain/vanilla canvas way: var canvas = Dom.get('canvas');var context = canvas.getContext('2d');context.drawImage(source, x, y, w, h, ...); I've tried: var context = pixiRenderer.context;.. but this only returns the following: CanvasRenderingContext2D {} And now for the follow ups: Is the context (2d), unique to the Canvas? Would drawing imaged to the graphics object limit me to the CanvasRenderer, or could I still use PIXI.autoDetectRenderer and PIXI.WebGLRenderer ? Thanks in advance!

Hi all, i'm facing with this problem on some chrome browser (updated), can some one suggest where i must check the error? I use typescript with webpack. Can some one tell me how to figure out this error? The code work well also in internet explorer!!! The problem is only on chrome windows. This is my webpack configuration: var path = require('path'); var webpack = require('webpack'); var phaserModule = path.join(__dirname, '/node_modules/phaser/'); var phaser = path.join(phaserModule, 'build/custom/phaser-split.js'), pixi = path.join(phaserModule, 'build/custom/pixi.js'), p2 = path.join(phaserModule, 'build/custom/p2.js'); const { CheckerPlugin } = require('awesome-typescript-loader') var definePlugin = new webpack.DefinePlugin({ __DEV__: JSON.stringify(JSON.parse(process.env.BUILD_DEV || 'true')) }) module.exports = { entry: { app: [ //'babel-polyfill', path.resolve(__dirname, 'app/index.ts') ], vendor: ['pixi', 'p2', 'phaser'] }, watch: true, devtool: 'cheap-source-map', output: { pathinfo: true, path: path.resolve(__dirname, 'dist'), publicPath: './dist/', filename: '[name].js' }, module: { rules: [{ test: /\.ts(x?)$/, exclude: /node_modules/, loader: "awesome-typescript-loader" //loader: "babel-loader?presets[]=es2015!awesome-typescript-loader" }, { test: /\.css$/, loader: 'css-loader' }, { test: /pixi\.js/, use: ['expose-loader?PIXI'] }, { test: /phaser-split\.js$/, use: ['expose-loader?phaser'] }, { test: /p2\.js/, use: ['expose-loader?p2'] } ] }, plugins: [ new CheckerPlugin(), new webpack.optimize.CommonsChunkPlugin({ name: 'vendor', filename: 'vendor.bundle.js', minChunks: Infinity }), ], resolve: { alias: { 'phaser': phaser, 'pixi': pixi, 'p2': p2 }, extensions: [".tsx", ".ts", ".js", ".jsx"] } };

Hi people, I'm porting something from flash where I have a drawn map with roads, and I want to be able to select each road individually with the mouse. now in Flash I could simply use the hittest on the shapes of the roads, but in PIXI I can't. My solution was to draw all the roads, each with an unique RGB color, and do a get pixel on your mousecoords to see which road you've selected. Now my problem is, how do i get pixeldata from my sprite when I'm using a webgl renderer ? What I've come up with so far is creating a separate canvasrenderer and a separate stage to render my map to, and from that canvas (renderer.view) get the 2d context and get pixeldata.. // create separate canvas and canvasRenderer for this pixel mapvar canvasStage = new PIXI.Stage(0x000000);var canvasRenderer = new PIXI.CanvasRenderer(1024, 598, null, true);// create a texture that holds the mapvar texture = new PIXI.RenderTexture(1024, 598, this.canvasRenderer);texture.render(map);// create a sprite on our separate stage, otherwise the texture won't be renderedvar textureSprite = new PIXI.Sprite(texture);canvasStage.addChild(textureSprite);// render the stagecanvasRenderer.render(canvasStage);after that is done, I can use this to get my pixels var pixelData = canvasRenderer.view.getContext(("2d")).getImageData(posX, posY, 1, 1).data;Is this the correct way to do it? or is there a better way? regards, Martijn

Hi and hello there fellas, I'd like to request your help in solving a strange Canvas bug. First of all I'd like to state that I've already released an Android/iOS game using Pixi.js (and Cocoon.js) so I do have some experience in Pixi.js stuff and I'm at least not a complete rookie. I've just recently updated my current work-in-progress project from Pixi 2.x to 3.x, which took a few hours because like half the api was deprecated. But thankfully those guys at Pixi made a deprecation.js file which made the changes a lot easier. After updating all parts of my project I have come to a state where it works just like it used to - well, in WebGLRenderer at least. As soon as I switch to CanvasRenderer (which is a must for me because of performance reasons) all hell breaks loose and images just disposition themselves randomly without any consistency or reason. I'm attaching 2 images, one from a WebGLRenderer and one from a CanvasRenderer standpoint. (It is important to note that this project worked flawlessly in both renderers back in 2.x.) So basically, what happens is... I have no idea. What is happening? In the webgl screenshot you can see that the images are positioned correctly. But in the canvas one, Some of the images are not displayed in the correct position even though their position.x/y or scale.x/y or whatever attributes have obviously not changed at all. Which makes this even more inconsistent is that I have at least 4-5 screens in my game (each being a different DisplayObjectContainer, now Container) and each screen's container seems to render a different amount of images correctly and/or wrong. I've looked all over my assets' attributes to see what changed but considering that the WebGLRenderer works perfectly and both renderers also worked perfectly in Pixi 2.x I can only assume that there is something wrong with the new CanvasRenderer. Can anyone with some insight on this or someone famous(!) like Xerver or GoodBoyDigital help me out with this? [] I'd be really grateful!

Hello, All is in the title, if you want a running exemple, as I'm unable to doing a jsfiddle, you can go here and: http://pixijs.github.io/examples/index.html?s=basics&f=spritesheet.js&title=SpriteSheet%20Animation replace the first line by this: var renderer =new PIXI.CanvasRenderer(800, 600);and tint the movie. movie.tint=0xcd12d0Then push the green button: the plane becomes crazy. It's in V3

I made a little demo called pixi-bouncing-box. You can see the demo here. So initially there are 10 bouncing boxes. When button add 10 boxes is clicked, another 10 boxes are added to stage. The animation run smoothly at 60fps, even after 90 boxes added. But after awhile, the fps gradually decreased from 60 to 50 then down until 20fps with 90 boxes added to stage. I saw the PIXI v3 100k bunnies benchmark and it claimed it got 40fps. Did I make some mistakes? The code I made is available at Github, but I'll also post it here in case you need a quick scan. ;(function ( window, document, undefined ) { 'use strict'; var WIN_WIDTH = window.innerWidth; var WIN_HEIGHT = window.innerHeight; var btnAdd = document.querySelector('#add'); var renderer = new PIXI.CanvasRenderer(WIN_WIDTH, WIN_HEIGHT, { transparent: false, autoResize: true }); renderer.backgroundColor = 0xF5866B; document.body.appendChild( renderer.view ); var stage = new PIXI.Container(); var speed = 10; var box_w = 70; var box_h = 70; var boxes = []; addTenBoxes(); btnAdd.addEventListener('click', addTenBoxes, false); var boxEdgeRight = WIN_WIDTH - box_w; var boxEdgeBottom = WIN_HEIGHT - box_h; requestAnimationFrame(animate); function animate() { for (var i = boxes.length - 1; i >= 0; i--) { var curr = boxes[i]; if ( curr.isGoingRight ) { curr.position.x += speed; } else { curr.position.x -= speed; } if ( curr.isGoingDown ) { curr.position.y += speed; } else { curr.position.y -= speed; } if ( curr.position.y < 0 ) { curr.isGoingDown = true; changeBoxColor( curr ); } if ( curr.position.x < 0 ) { curr.isGoingRight = true; changeBoxColor( curr ); } if ( curr.position.y > boxEdgeBottom ) { curr.isGoingDown = false; changeBoxColor( curr ); } if ( curr.position.x > boxEdgeRight ) { curr.isGoingRight = false; changeBoxColor( curr ); } } renderer.render(stage); requestAnimationFrame(animate); } function addTenBoxes() { for (var i = 10 - 1; i >= 0; i--) { var box = new PIXI.Graphics(); box.beginFill(getRandomColor()); box.drawRect(0,0,box_w,box_h); box.isGoingRight = true; box.isGoingDown = true; box.position.x = getRandomXPos(); box.position.y = getRandomYPos(); box.endFill(); stage.addChild(box); boxes.push(box); } } function changeBoxColor( _box ) { _box.beginFill( randomColor().replace('#', '0x') ); _box.drawRect(0,0,box_w,box_h); _box.endFill(); } function getRandomXPos() { return Math.random() * WIN_WIDTH - box_w; } function getRandomYPos() { return Math.random() * WIN_HEIGHT - box_h; } function getRandomColor() { return randomColor().replace('#', '0x'); }})( window, document );Does this have something to do with CanvasRenderer? Because when I switch to WebGLRenderer, the animation run smoothly at 60fps even after 3-5 minutes. I am aware that WebGLRenderer is faster than CanvasRenderer but not all device support it, that's why I used CanvasRenderer. This demo is tested in the latest Chrome on Yosemite.

Hi all, I just posted this issue over here at the PIXI github (https://github.com/GoodBoyDigital/pixi.js/issues/1038) - But thought it might be worth it to fire up a discussion and see if anyone had come accross the issue before. I'll give a brief overview incase people can't be bothered to look at the github link, basically what's happening is this : webGL Renderer -> canvas Renderer That's two sprites on a blank stage, one is a standard PIXI.Sprite (the square) and the other is a PIXI.TilingSprite (the circle) - under webGL it runs fine, under canvas it fails...as you can see. The code to reproduce the issue is over at the above mentioned github link. I'm using the latest PIXI and have tested it on firefox, chrome, and using cordova crosswalk on android devices. I also have a secondary question for anyone familiar with cordova crosswalk (or just plain crosswalk as well) When I build this into an app using crosswalk, on one of my test phones it forces the canvasRenderer when I use autoDetectRenderer. And when I try to set the renderer manually with "renderer = new PIXI.WebGLRenderer" I get an error saying the phone does not support webGL. However, when I build this using intelXDK (which as far as I know uses cordova crosswalk) the issue never arises, it's as if the phone magically can use webGL again. Any Ideas?