Search the Community

Showing results for tags 'pixi'.

More search options

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


  • HTML5 Game Coding
    • News
    • Game Showcase
    • Facebook Instant Games
    • Coding and Game Design
  • Frameworks
    • Phaser 3
    • Phaser 2
    • Pixi.js
    • Babylon.js
    • Panda 2
    • melonJS
    • Haxe JS
    • Kiwi.js
  • General
    • General Talk
  • Business
    • Collaborations (un-paid)
    • Jobs (Hiring and Freelance)
    • Services Offered

Find results in...

Find results that contain...

Date Created

  • Start


Last Updated

  • Start


Filter by number of...


  • Start



Website URL





Found 399 results

  1. Raxxen

    Trouble Extending a Pixi Class

    Hi all, I'm currently trying to learn coding and Javascript using Pixi to make a clone of Colour Flood. I am having trouble extending the Graphics class (sorry I am unsure if class is the right word) in Pixi. I have two JS files, one called game.js for the game and one called token.js for the token class. What happens is when I run the program on my web server, I get an error that says "Cannot read property 'points' of undefined." This occurs right as I try use the drawRect function. Here's the code for my token function Token (color) { this._R = Math.floor(color/0x10000); this._G = Math.floor(color/0x100-this._R*0x100); this._B = color - this._R*0x10000 - this._G*0x100;}Token.prototype = Object.create(PIXI.Graphics.prototype);Token.prototype.constructor = Token;//Find a smooth transition to the next colourToken.prototype.findTransition = function(color, steps) { this._nextR = Math.floor(color/0x10000); this._nextG = Math.floor(color/0x100-this._nextR*0x100); this._nextB = color - this._nextR*0x10000 - this._nextG*0x100; this._tranR = (this._R - this._nextR)/steps; this._tranG = (this._G - this._nextG)/steps; this._tranB = (this._B - this._nextB)/steps;};I haven't really done much with it yet. Here's the code for my game: var viewWidth = 640;var viewHeight = 420;//Make a pixi Renderervar renderer = PIXI.autoDetectRenderer(viewWidth, viewHeight);renderer.view.className = "rendererView";// add render view to DOMdocument.body.appendChild(renderer.view);//create a new instance of pxi stagevar stage = new PIXI.Stage(0x000000);//Create an Array for the Squarevar squareArray = [];var totalSquare = 100;var colors = [0xFF0000, 0x00FF00, 0x0000FF, 0xFFFF00];for (var i = 0; i < totalSquare; i++) { var color = colors[Math.floor(Math.random()*4)]; var Token = new Token(color); Token.beginFill(color); var layer = Math.floor(i/10); Token.posX = viewWidth/11*((i+1)-(layer*10)); Token.posY = viewHeight/11*(layer+1); Token.drawRect(Token.posX, Token.posY, 10, 10); stage.addChild(Token); squareArray.push(Token);}renderer.render(stage);If you need any more info let me know. Thanks for the help! Lenny
  2. I hope to have something online soon but I am guessing really with the definitions as I have never written one, does anything think they can put together a Pixi.d.ts file? Cheers!
  3. jorgeliecer

    Pixi render texture on polygon

    Hi, I want to render a texture on this area, i do it using line to or polygon on graphics object, but sprites just offer me a square option. i need to change that (top, left), (top, right), (bottom, left), (bottom, right) in order to render a imagen inside it.
  4. First of all, hey guys! I've been floating about the forum for a while now, and look forward to posting a lot more in the near future. I've been having quite a bit of fun playing around with Pixi these last few months, I'm in the midst of developing a game powered by it. Anyway, I've hit a problem that I thought somebody may be able to help out with; I was creating mountains by using a TilingSprite masked by a Graphics object, this was working beautifully up until I tried to use another mask somewhere else. The problem was that the two completely unrelated masks were interfering with one another. After doing a little research I found that this was a known bug with the WebGL renderer and was fixed in the latest release, however, after downloading and testing the latest release it appears that TilingSprites can no longer be masked? I have set up a simple test to illustrate the problem: Open up the developer console and you will see the error "Uncaught TypeError: Cannot read property 'primitiveShader' of undefined". I tried the same thing but with the Canvas renderer and no error is displayed, but the mask also doesn't seem to have any effect. Hopefully someone more clued up on the WebGL renderer can shed some light on this problem. Many thanks, Daniel.
  5. mandarin

    Group trouble or Pixi?

    Hi. I use Phaser 1.1.3, and this code gives me this error: Uncaught TypeError: Object TurnGroup has no method 'addChild' at line 10897 Here's the code: <!DOCTYPE html><html lang="en" xmlns=""><head> <meta charset="utf-8" /> <script src="js/phaser.min.js"></script></head><body><div id="gameContainer"></div><script type="text/javascript">SQ = {};SQ.Game = function(game) { = game;};SQ.Game.prototype = { create: function() { this.turn = new SQ.Turn(this); }};SQ.Turn = function(sq_game) {,, 'TurnGroup', true);};SQ.Turn.prototype = Object.create(Phaser.Group.prototype);SQ.Turn.prototype.constructor = SQ.Turn;window.onload = function() { var game = new Phaser.Game(288, 512, Phaser.CANVAS, 'gameContainer'); game.state.add('Game', SQ.Game); game.state.start('Game');};</script></body></html>
  6. nikolayku

    Tags puzzle game(pixi.js)

    Hi, everyone. Please look at my first html5 game: You can play here Thank you.
  7. sweetlemons

    hitTest in pixi

    Hi Guys Frogive me if this is a silly question but how do I do a hit test using pixi? if(hitTest(obj1, obj2)){ do something}; I'm busy writing a function to do this but I would imagine there has to be an easier way. Thanks for your help Lemons
  8. Im using phaser (1.0.6) for my game, but I suspect this to be so low level so Im putting it here. I have a spritesheet of three frames. The zebras looking to the left are unchanged and simply rendered, those looking to the right are flipped using scale.x = -1. What happens is pretty much what the topic say. The first row shows the behaviour of the system for textures with odd dimensions, the second one is for even sized textures. I render using pixi canvas renderer. Anyone can reproduce this, or knows a better workaround that simply creating all your pix with even dimensions?
  9. Hi there, We've used Pixi.js a couple of times already in commercial projects because its so beautifully fast. Unfortunately one of the projects we're currently working on seems to be bucking the trend and we are struggling to get to the bottom of it. The app consists of a continuous strip of panels that scroll left to right - we're using DisplayObjectContainers for each panel and then loading in a bunch of images (in layers) and displaying them as sprites within that. Performance was excellent until we started to build more panels where it felt like some sort of memory threshold was crossed on the iPad Mini/2. The issue we have is that we are going to need 100+ panels within our strip - so memory management is of the upmost importance. So far we have 38 and the frame rate has already dropped to an unusable level. We are of course loading in each set of layers only as the user scrolls to that point in the strip and destroying panels they have already moved past but this doesn't seem to release the memory back to the browser fully. We are removing the sprites from the display list, destroying all the PIXI.Textures, removing them form the PIXI.Texture Cache and nulling everything but the frame rate just slows the further in you get. If you skip straight to the end (skipping the need to load all the images on the way) it stays fast. Here's part of the 'unbuild' function that exists within each panel: //console.log(PIXI.TextureCache) for (var pane in this._panes) { //console.log(this._panes[pane].art.children.length) for (var layer in this._paneData[pane].layers)//go through all the layers in this pane { PIXI.Texture.removeTextureFromCache(Game.path+'panel-assets/'+this._paneData[pane].layers[layer].art) //console.log('removing', Game.path+'panel-assets/'+this._paneData[pane].layers[layer].art) } for (var bubble in this._paneData[pane].bubbles)//go through all the layers in this pane { PIXI.Texture.removeTextureFromCache(Game.path+'bubbles/'+this._paneData[pane].bubbles[bubble].art) //console.log('removing', Game.path+'bubbles/'+this._paneData[pane].bubbles[bubble].art) } this._panes[pane].art.alpha = 0 while(this._panes[pane].art.children.length > 0) { this._panes[pane].art.getChildAt(0).texture.destroy() this._panes[pane].art.removeChild(this._panes[pane].art.getChildAt(0)) } for (var layer in this._paneData[pane].layers)//go through all the layers in this pane this._loadedLayers[this._paneData[pane].layers[layer].art] = null for (var bubble in this._paneData[pane].bubbles) this._loadedBubbles[this._paneData[pane].bubbles[bubble].art] = null //console.log(this._paneTimelines[pane].getChildren()) var timelines:any[] = this._paneTimelines[pane].getChildren() for (var timeline in timelines) { timelines[timeline].kill() timelines[timeline] = null } } timelines = null this._loadedLayers = {} this._loadedBubbles = {} if(this.timelineAcross) { this.timelineAcross.clear() this.timelineAcross.kill() this.timelineAcross = null } if(this.timelineAmbient) { this.timelineAmbient.clear() this.timelineAmbient.kill() this.timelineAmbient = null } It will also run beautifully smoothly (60fps) if we generate 100 panels and reuse the same image assets for each one. I realise this may be a larger issue with mobile safari and its memory limitations such as I have read about here: and here: But these articles refer to HMTL5 image objects in the DOM. I was wondering if there is anything else I can do in terms of getting mobile safari to forget image data that has been loaded and viewed via the PIXI ImageLoader or if we are going to have to completely change approach? Any suggestions would be really appreciated! Thanks
  10. Hello guys, Im not sure if it is a pixi-bug or my own code but maybe you can evaluate this better than me I created a MovieClip with an onComplete callback to remove itself. Works fine, but as soon as there are more MovieClips, pixi throws an error: Uncaught TypeError: Cannot call method 'updateTransform' of undefined pixi.js:3126 PIXI.Stage.updateTransform pixi.js:3126 PIXI.WebGLRenderer.render pixi.js:4460 animate (index):24 Looks like that the MovieClip is removed and pixi still wants to call updateTransform. The easy way is to put tons of if(indexOf(mc) != -1)'s to the compiled pixi code but that cant be the correct way to do it You can get the lines here: or here: Thank you in advance
  11. benny!

    When can we expect Pixi1.4

    Hi, I am just working more and more with Pixi.js and I am just curious if you could give us some details when we can expect a new version of Pixi.js? I already saw the milestone bug view on github - but this covers only bugs/enhancement and gives only an abstract view on when to expect a new release? Best, benny!
  12. Hi all, after releasing my first CocoonJS port using Pixi called Yummy Plate, I thought I share some experience I made with it. The experience below is based on the following versions: - Pixi.js V1.2&1.3 - CocoonJS version 1.4.4. 1.) Setting Canvas To Fullscreen Mode You have to keep an eye on what renderer you use in PIXI. WebGL or Canvas. CanvasRenderer: Not a problem - simple use e.g."idtkscale:ScaleAspectFill;" to scale up your canvas in CocoonJS environment. WebGLRenderer: Make sure to place all game objects in a display container which is scaled up to window.innerWidth and window.innerHeight. Refer to this thread for more details. I choosed the CanvasRenderer using CocoonJS' screencanvas. This accelerates and optimizes the canvas operations anyway. Performance-wise it worked very well as far as I could test it. 2.) Touch input Current version of CocoonJS seems to have some problems with the way Pixi.js processes the touch events. For Yummy Plate it was not the big deal. However, the guys from Ludei are already working on the problem. Read this thread for more information. 3.) Bitmap Font Loader Yummy Plate uses bitmap fonts. Loading bitmap fonts requires XML parsing. Unfortunately, there is no XML parser available in the current CocoonJS version. What I did, was convertig the XML generated bitmap font file into JSON format and replaces the bitmap font loaded with the json loader. Apart from above's points - converting the project to a native (android) application was really advanced. Thanks to Ludei, I could also test some of their premium features, and so far I really have to say that I like the CocoonJS environment. Feel free to check out Yummy Plate by yourself if you have an android device: A nice rating is always welcome ;-) Best, benny!
  13. Hi guys, I'm trying to create a basic tile scroller. At the moment, I'm creating all the tiles as sprites and then laying them out in a grid. Seems a little silly to have these "smart" sprites making up a tiled background map. Is there not some kind of "dumb" sprite that renders ultra-quickly that I should be using instead to render a tile? I'm also creating my worlds in a 2 dimensional static array of numbers as the map. Is this the smart way to do it? Thanks, Spider
  14. Gizak

    Loading Example using PIXI.js

    Hello everyone, I am a new HTML5 developer and have never built games. Now I need to start with PIXI.js, but I don't know how to load resources including images, audio and so on before step into game stage. Could someone give me a simple example to show what I should do? Thank you guys so much!
  15. haden

    Error in Sprite.crop

    While using Sprite.crop I noticed that changing crop.width doesn't always work. For example, the following code won't have any effect: var sprite = game.add.sprite(0, 0, 'someSprite');sprite.crop = new Phaser.Rectangle(0, 0, sprite.width, sprite.height);sprite.crop.width = v; // some value vNow the following code will work without problem: var sprite = game.add.sprite(0, 0, 'someSprite');sprite.crop = new Phaser.Rectangle(0, 0, sprite.width, sprite.height);sprite.crop = sprite.crop; // adding this line fixes the problemsprite.crop.width = v; // some value vThe problem is inside crop's "set" function: set: function (value) { if (value instanceof Phaser.Rectangle) { if (this._cropUUID == null) { this._cropUUID =; PIXI.TextureCache[this._cropUUID] = new PIXI.Texture( PIXI.BaseTextureCache[this.key], { x: value.x, y: value.y, width: value.width, height: value.height } ); } else { PIXI.TextureCache[this._cropUUID].frame = value; } this._cropRect = value; this.setTexture(PIXI.TextureCache[this._cropUUID]); }}The first time we set a crop rectangle R, sprite._cropRect is assigned R but in PIXI texture cache we actually create a new frame instance. So if we set sprite.crop.width we do change the width of _cropRect but not the width of the texture's frame.
  16. fabnun

    Set FPS

    Hi, first thank for this excellent framework, I used it to implement a zoom in Now I want to use it to develop a match viewer for My query is: can i set fps to a constant value such as 30 fps? Greetings and sorry by my english (i use google translate)
  17. Hello ya'll, I've got a basic question but I wanted to get opinions of the easiest way to load a JSON file and access it immediately after. I based this on one of the examples: var assetsToLoader = ["assets/GameData.json"];loader = new PIXI.AssetLoader(assetsToLoader);// create a new loaderloader.onComplete = onJsonLoaded; // use callbackloader.load(); //begin load My problem is I didn't understand how I'm supposed access the JSON object after it's loaded. Is the object passed into onJsonLoaded or is there a method within AssetLoader to access it. And would that work for multiple files as well? Thanks!
  18. inductible

    Scale and InteractionManager

    Hey guys, is there any know weirdness with 'scale' property of a DisplayObject, and InteractionmManager? I'm targeting canvas renderer only - no WebGL rendering here. My resize handler does the following: - scales the stage based on the new width and height (thought this seems to have no effect on any child DisplayObjects!?): var sx:number = w / this.config.stageW ;var sy:number = h / this.config.stageH ;stage.scale.x = sx;stage.scale.y = sy; - resizes the renderer: renderer.resize( w, h ) ; - because stage scale seems not to function as I'd expect, I try propagating the scale into my current view object this.scale.x = sx ;this.scale.y = sy; - This latter step correctly sizes the view, but my interactive objects are now screwed because the hitTest no longer appears to work (functional hit area is no longer coupled to where the scaled object appears to be)... Am I missing something obvious?
  19. Dream Of Sleeping

    Anchor points and collision.

    Hello. I was looking into the easeljs framework and I wanted to flip an image so it faced the other way. To do this I had to set it's regX and regY property to the center of the image and then set the scaleX to -1. This then changes the x position to the center of the image. I thought this seemed really strange, although I'm not yet in a position to know what is strange and what the norm. So, I was looking into pixijs and this does the same thing. Instead its called anchor.x. As I think both frameworks are little based on a flash type of framework, this must be a pretty common way of doing things so I was wondering... Where do you prefer your anchor poiints? And if you like it in the middle how does this affect what type of collision detection you use? I want to just started dong bounding box collision but with the anchor point being at the center that kind of messes up every example of this type of collision dection I've seen. The rectangle interesects methods I've seen would no longer work for example. If you you prefer your anchor point at the top left, then how do you flip images for your sprites in animations? Or do you reverse your image the in an image editor first?
  20. I really really, like the way phaser is setup, but at the same time I want pixi for my renderer. Is there any plan for implementing pixi in phaser or has someone done so? Or am I just crazy, and it's not a good idea? Regards, O.
  21. Qqwy

    Pixi.js and Filters?

    Hello there, everyone. I am a hobbyist game developer and earlier today I stumbled upon Pixi.js. It looks astonishing and the performance seems amazing. And as I am wanting to create a (simple) bullet-hell shooter, this is very important. Anyway, to my question: In the 'storm brewing' update, it was said that one of the new features was Filter support for Pixi.js . I would love to use some kind of 'glow' effect for most of my enemies, bullets and power-ups. However, I am having trouble finding anything about filters in the Pixi documentation. I also tried browsing the source to no avail. So: -Is there filter support right now? IF so, how do we use it? -How hard is it to accomplish aforementioned 'glow' effect? I have seen (This amazing example ) of one possible way to accomplish something like this in WebGL. When creating Filters, do we have to write this in the shader language?(To which I am completely new, unfortunately...) Or is there another, much easier way to accomplish this effect? I am confused and slightly intimidated by the obscene obscureness of the WebGL Shaders. I hope someone can help me out. Thank you, ~Qqwy
  22. Hi everybody ! First of all sorry for my poor english it's not my mother tongue, so please apologize the mistakes. I work on an isometric tile engine, based on pixi.js (Yeah!) for a little rpg. My tryout work fine, except the performances, I dont understand what i'm doing wrong. Here my source code (scroll.7z.txt (remove the .txt to use, the forum refuse me to upload 7z file) just unzip somewhere and open 'scroll2.html' (tested with firefox) It's a big area, covered with tiles who scroll from left to right to simulate a movement (later it's can scroll up & down to, it's a very big world) Currently I pick texture randomly. Algorith d├ętails : In fact I load about 1500 sprites in a DisplayObjectContainer just once. Each sprite width is 64px, the textures are cached in a structure (so they are only calculated once) then I move the Container for step*64 pixel, when the movement is done I switch all the sprite texture like sprite[j].setTexture(sprite[j-step].texture); And its work !.... ...but with or without passing in my scrolling function I have only 30-40 fps. Is it the fault of the sprite number ? Maybe the TextureRenderer can help me but all my tries are big failures, I may not understand how it work. My biggest problem is that in the bunny jumping example ( my computer still have 60fps with 5000+ bunnies, a lot more than in my code. Maybe it's because of the size of the sprite ? So what I've missed in my code ? How can I improve my code ? Thank you for reading, I hope someone can help me
  23. foozaka

    Pixi.js -> native mobile

    Hi guys, Great and impressive work! Maybe it is obivius, but I have a questions: what way is better to pack game based on html5/js/pixi.js into native mobile environment (ios/android)? cocoon.js? self-writen webview? something else? Thanks a lot!
  24. 4ian

    Using virtual cameras

    Hi, First, congratulations for your work on Pixi, the library is awesome I wonder if it is possible to use some kind of virtual cameras ? That is to say, use for the sprites and others objects coordinates which are "world" coordinates, and then change the area that is rendered by the stage. I've tried to change the stage position or rotation properties, but it does not seems to have any effect. Any help is welcome