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 413 results

  1. How much in PIXI affect fps canvas size? CanvasRenderer with understanding, and how will the WebGLRenderer? for example 1366x768 and 1920x1080.
  2. Struggling to remove an element of a Spine animation and wondered if there is any documentation to assist me. I tried the following with no success to attempt to remove the HiddenCarrot element function animate() { requestAnimFrame(animate); // render the stage renderer.render(stage);if (boolAnimationPlaying == true) { var boolComplete = bedroomTableDrawer.state.isComplete(); console.log("boolComplete = " + boolComplete); if (boolComplete == true) { bedroomTableDrawer.skeleton.findSlot("HiddenCarrot").setAttachment(null); boolAnimationPlaying = false; }}I have been supplied this spine data from my client and I am not familiar with spine but from what I can see in the spine data, it appears to set the attachment for the HiddenCarrot slot when the animation starts playing. Here is a test file I have uploaded where I am successfully removing another element of the table but not the carrot Also is there a possible bug in the setAttachment: function due to it using the following code: for (var i = 0, n = slots.size; i < n; i++) { Should it not be the following? for (var i = 0, n = slots.length; i < n; i++) { Here is the spine data {"bones": [ { "name": "root-Table" }, { "name": "Drawer-bone", "parent": "root-Table", "length": 37.46, "x": 311.84, "y": -41.04, "rotation": -7.68 }, { "name": "Carrot_Table-bone", "parent": "Drawer-bone", "length": 101.2, "x": 30.07, "y": 13.82, "scaleX": 0.5, "scaleY": 0.5, "rotation": -161.31 }],"slots": [ { "name": "Bedroom_Table", "bone": "root-Table", "attachment": "Bedroom_Table" }, { "name": "Bedroom_Table-Drawer", "bone": "Drawer-bone", "attachment": "Bedroom_Table-Drawer" }, { "name": "Bedroom_Table-DrawerOverlay", "bone": "Drawer-bone", "attachment": "Bedroom_Table-DrawerOverlay" }, { "name": "Bedroom_Table-Cover", "bone": "root-Table", "attachment": "Bedroom_Table-Cover" }, { "name": "HiddenCarrot", "bone": "Carrot_Table-bone" }],"skins": { "default": { "Bedroom_Table": { "Bedroom_Table": { "x": 344, "y": -84, "width": 178, "height": 190 } }, "Bedroom_Table-Cover": { "Bedroom_Table-Cover": { "x": 344, "y": -84, "width": 178, "height": 190 } }, "Bedroom_Table-Drawer": { "Bedroom_Table-Drawer": { "x": 27.19, "y": 11.74, "rotation": 7.68, "width": 136, "height": 61 } }, "Bedroom_Table-DrawerOverlay": { "Bedroom_Table-DrawerOverlay": { "x": 27.19, "y": 11.74, "rotation": 7.68, "width": 136, "height": 61 } }, "HiddenCarrot": { "HiddenCarrot": { "x": 6.95, "y": -16.63, "rotation": 169, "width": 216, "height": 103 }, "HiddenCarrot-masked1": { "x": 6.95, "y": -16.63, "rotation": 169, "width": 216, "height": 103 }, "HiddenCarrot-masked2": { "x": 6.95, "y": -16.63, "rotation": 169, "width": 216, "height": 103 } } }},"animations": { "animation": { "slots": { "HiddenCarrot": { "attachment": [ { "time": 0, "name": "HiddenCarrot" } ] } }, "bones": { "Drawer-bone": { "rotate": [ { "time": 0, "angle": 0 } ], "translate": [ { "time": 0, "x": 0, "y": 0, "curve": [ 0.358, 0.01, 0.538, 1 ] }, { "time": 0.1666, "x": 1.56, "y": 0.6, "curve": [ 0.45, 0, 0.518, 0.97 ] }, { "time": 0.6666, "x": -46.57, "y": -16.21, "curve": [ 0.312, 0.01, 0.544, 1 ] }, { "time": 0.8333, "x": -45.47, "y": -15.47 } ] }, "Carrot_Table-bone": { "rotate": [ { "time": 1, "angle": 0, "curve": [ 0.25, 0, 0.955, 0.42 ] }, { "time": 1.1666, "angle": -14.29 }, { "time": 1.2, "angle": 340.68, "curve": [ 0.138, 0.7, 0.75, 1 ] }, { "time": 1.3333, "angle": 337.09, "curve": [ 0.378, 0.01, 0.53, 0.94 ] }, { "time": 1.4666, "angle": -22.9 } ], "translate": [ { "time": 1, "x": 0, "y": 0, "curve": [ 0.25, 0, 0.955, 0.42 ] }, { "time": 1.1666, "x": -1, "y": 4.69 }, { "time": 1.2, "x": -6.24, "y": 18.84, "curve": [ 0.138, 0.7, 0.75, 1 ] }, { "time": 1.3333, "x": -14.82, "y": 32.91, "curve": [ 0.378, 0.01, 0.53, 0.94 ] }, { "time": 1.4666, "x": -14.52, "y": 30.72 } ] } }, "draworder": [ { "time": 0, "offsets": [ { "slot": "HiddenCarrot", "offset": -2 } ] }, { "time": 1.184 } ] }}}
  3. I need these features if I'm to use Pixi to be able to finish a js library I'm making, which uses primitives allot (e.x. Pixi Graphics). a ) or "dashed strokes" is straight forward, I just need to be able to created dashed strokes on PIXI Graphics objects (see here: ) b ) or "complex shapes" is just complex shapes as refered to here: , which would be nice to have but is not as important as the others. c ) or "gradient fill", especially radient gradient fill, as seen here: d ) or "compositing" (globalCompositeOperation), as explained here: And I'm wondering about three things: 1. Is any of this built into Pixi right now? 2. If not built in, is there a hack I can use? 3. If neither, will it be supported eventually? Thanks
  4. Hey, since sprite.scale.setTo takes factors instead of a target pixel amount, I was looking for another way to change the size. Since I didn't find anything about that in the phaser doc and phaser.sprite derives from the pixi.js sprite, I checked the pixi doc and found sprite.width() and .height(). Sadly for sprite.width(x); typescript tells me I "cannot invoke an expression whose type lacks a call signature." Is this a type definition file problem? How could I change the definitions file to make it work?
  5. d13

    Rotate around centre

    Hello! Could someone suggest the best way of making a Pixi sprite rotate around its centre without changing its anchor.x and anchor.y? I want to position sprites based on their top right corners, but make them rotate around their centres.
  6. Strangely shows the text doubled pixels: fragment code .fnt: <char id="49" x="192" y="2" width="2" height="7" xoffset="0" yoffset="1" xadvance="4" page="0" chnl="15" letter="1"/> <char id="50" x="197" y="2" width="5" height="7" xoffset="0" yoffset="1" xadvance="7" page="0" chnl="15" letter="2"/> <char id="51" x="204" y="2" width="5" height="7" xoffset="0" yoffset="1" xadvance="7" page="0" chnl="15" letter="3"/> <char id="52" x="211" y="2" width="5" height="7" xoffset="0" yoffset="1" xadvance="7" page="0" chnl="15" letter="4"/> <char id="53" x="218" y="2" width="5" height="7" xoffset="0" yoffset="1" xadvance="7" page="0" chnl="15" letter="5"/> <char id="54" x="225" y="2" width="5" height="7" xoffset="0" yoffset="1" xadvance="7" page="0" chnl="15" letter="6"/> <char id="55" x="232" y="2" width="5" height="7" xoffset="0" yoffset="1" xadvance="7" page="0" chnl="15" letter="7"/> <char id="56" x="239" y="2" width="5" height="7" xoffset="0" yoffset="1" xadvance="7" page="0" chnl="15" letter="8"/> <char id="57" x="246" y="2" width="5" height="7" xoffset="0" yoffset="1" xadvance="7" page="0" chnl="15" letter="9"/>font .png Why is there such a shift? Name: new PIXI.BitmapText(mName, {font: "17px nbp", align: "center"}),Name.position.x = roundHalf(x - Name.textWidth / 2);Name.position.y = roundHalf(y - Name.textHeight / 2);roundHalf© = (c << 0) - 0.5; Why is this split pixels?
  7. is there any way to have the api documentation have links to the PIXI docs where appropriate? for example, where the phaser class Stage extends PIXI.stage, it would be convenient if there were a clickable link to PIXI's docs for that. thanks!
  8. I want to have multiple twist effects, is this possible? i.e. var stage = new PIXI.Stage(0x66FF99); var asd = new PIXI.GrayFilter(); asd.gray = 0; var dsa = new PIXI.BlurFilter(); dsa.blur = 0; stage.filters = [asd,dsa];But this applies just one type of filter to the whole screen, I want multiple small instances of a twist filter. Any ideas?
  9. I noticed that PIXI's filters are not included in the Phaser build, but are included in the phaser.d.ts TypeScript declarations. Could the AbstractFilter be included in the Phaser build by default? Without it references to the PIXI filter types throw a cryptic error message from the TS compiler at runtime. Thanks Joe
  10. Hi there, there are sometime I want to make a quiz game using a database the one I want is in the style of this game: I've looked into several tools but when I saw pixi I fall in love. The game consists of several screens, menu screen, questions screen and credit screens, the questions would sit in a database I wanted to use sqlite, I've made many searches trying to discover the logic behind a game of this kind, I figured out how to store questions in a database and things like this, but I would like to know how to show this questions on the game, and how to determine correct answer, also I don't know how to do menu screens and how to make transitions between screens. Any help with pseudo-code or the logic behind this kind of game is really appreciated. Thank you very much. Best regards, Marcos.
  11. jRPG Engine is developed for the sole reason to allow for quick development of old school Japanese role playing games using javascript and various other technologies. It is also MIT licensed which is attached to the bottom. That means jRPGe is free to be modified, and distributed free of charge. I only ask that if you create modules or make some changes to contribute to the evolution of the engine. You do not have to of course. Everything you need in one place.
  12. Hi, I'm trying to change a texture region attachment on a spine model. For example, change the haircut of a character. What is the best way to change a region attachment? I've tried to get the head slot (slot = Sp.skeleton.findSlot("head") )and use setAttchement on this slot, but i was only able to set an existing attachment (like put an arm instead of the haircuts). Anyway, if i change the TexturePacker texture, its not working because the texture dont fit with the spine project due to the non-existing images in the spine project. So i suppose that I need to create another texture with PackerTexture including all the possibles haircuts. But i wasn't able to change the texture of an attachment If you have any ideas, it wil help me Thanks
  13. Hello phaser community, I observed some kind of misbehaviour with group nesting. It seems that the reference for the nested group is lost and PIXI.DisplayObjectContainer is exposed instead. Look at the following Testcode. There is a sprite in a group which is added itself to another group. When I try to retrieve the nested group with #getAt it returns a PIXI.DisplayObjectContainer and not the Phaser.Group object. I think this is not an expected behaviour ? I digged that deep because my initial problem was (and still is) that #countDead is not working with nested group items because of this behaviour (It's not iterating over the nested group elements but over the corresponding PIXI Containers., with the lack of the alive attribute). I couldn't find a back reference from DisplayObjectContainer to the Phaser.Group object. With this I could have build a workaround but I couldn't find anything to map PIXI objects to Phaser objects. //create a base group to start withbaseGroup = another nested group (to create the misbehaviour)nestedGroup = create a sprite to have a non-group type to addsprite = @game.add.sprite(0, 0, 'cap');//add it to the nested groupnestedGroup.add(sprite)//Now let's do some testing://output: sprite should be found in child group: expected: (true) is trueconsole.log 'sprite should be found in child group: expected: (true) is', nestedGroup.getAt(0) == sprite//output: base group should container the nested group: expected: (true) is false console.log 'base group should container the nested group: expected: (true) is', baseGroup.getAt(0) == nestedGroup //output: group#getAt should not expose PIXI Container: expected: (Phaser.Group) is (PIXI.DisplayObjectContainer)console.log 'group#getAt should not expose PIXI Container: expected: (Phaser.Group) is', baseGroup.getAt(0) //Test with countDead which uses group#iterate//First of all: set sprite dead. This is only a flag and should be reflected in method group#countDead.sprite.alive = false//default ist already true, for the sake of consistency.nestedGroup.alive = true//Sprite is DEAD, nestedGroup is ALIVE. Test it://output: our sprite is dead, so this should be 1 is 1 console.log 'our sprite is dead, so this should be 1 is', nestedGroup.countDead()//output: our nested group is alive should be 0 is 1 console.log 'our nested group is alive should be 0 is', baseGroup.countDead()I know that there was an update in a commit between 1.1.3 and 1.1.4 (see this commit). It seems to be related, because of the following selected code line. When nesting a group it's unerlaying PIXI object is added. But the reference to the Phaser.Group is lost at this point isn't it ? So all following calls to group#getAt(index) is return a PIX object and not the Phaser.Group object. add: function (child) { if ( !== this) { if (child.type && child.type === Phaser.GROUP) { = this; // Do we lose the reference to the Phaser.Group itself here ? this._container.addChild(child._container); (Source: github) My workaround for now is to maintain a own list/array of group items. It would be great to depend on Phaser's own display list. Thanks for reading. Regards George
  14. Is it possible to tile a frame texture in a movie clip object. So in otherwords can I make a animated MovieClip act like a Tiling sprite and change the width and height but have the textures just repeat infinitely instead of stretching? OR can I use a tiling sprite like a MovieClip and have the texture be updated to do animations? Or do i have to create a bunch of MovieClip Objects next to eachother?
  15. 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
  16. 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!
  17. 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.
  18. 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.
  19. 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>
  20. Hi, everyone. Please look at my first html5 game: You can play here Thank you.
  21. 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
  22. 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?
  23. 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
  24. 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
  25. 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!