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. ikkleh

    Pixi-Spine and Spine v3.5.51

    Hello, I'm attempted to load a spine animation (v3.5.51) into the current version of pixie-spine (as it states that it's only compatible with Spine 3.5.x I'm not using the Pixi loader, instead I'm just passing in the loaded Spine JSON in the constructor. It's valid JSON with the bones/animation properties in there (so not a string etc) However, what I'm getting is a crash 'Cannot read property 'children' of undefined at new Skeleton': for (var i = 0; i < data.bones.length; i++) { var boneData = data.bones[i]; var bone = void 0; if (boneData.parent == null) bone = new core.Bone(boneData, this, null); else { var parent_1 = this.bones[boneData.parent.index]; bone = new core.Bone(boneData, this, parent_1); parent_1.children.push(bone); <-- ERROR/CRASH HERE } this.bones.push(bone); } The exported JSON is v3.5.51: "skeleton": { "hash": "m3kYx9f3hy1R9hSrlYyJs6o/0fk", "spine": "3.5.51", "width": 202.11, "height": 317.08, "images": "" }, Any ideas?
  2. charlie_says

    PIXI sound & IE 11 Loader issue (Updated)

    Hi, I'm working on a game that may need to be playable on IE11 (ugh!) Having got my basic game now working, I've found that the sound is failing, with the error: Object doesn't support property or method 'addEventListener' It seems that pixi sound should work, but, it's not clear to me why this isn't happening for me... Any ideas?
  3. Hi all, My project manages asset loading through it's own loading system (I'm not using the Pixi Loader) and I'm a little confused about using SD and HD assets. I export 2 versions of each sprite sheet (from Texture Packer) - 1 SD size (e.g. sheet.png) and 1 HD size (e.g. sheet@2x.png). My loading system then checks window.devicePixelRatio and loads the correct asset accordingly (SD for dpr=1 and HD for dpi > 1 etc). However, I'm a little confused as to setting the baseTexture resolution to tell the renderer the scale of the texture I know the Pixi loader does this, but how to I set this correctly according the the DPR without using the loader? Thanks in advance!
  4. charlie_says

    PIXI cache on repeated loads?

    Hi, I'm certain there will be a way of doing this, but having looked through the docs I'm not seeing the answer... I'm loading some videos like this: const videoPathAndName: string = pathTo+'video/'+level+'/video/'+name; let videotexture = PIXI.VideoBaseTexture.fromUrls([ { src: videoPathAndName+'.webm', mime: 'video/webm' }, { src: videoPathAndName+'.mp4', mime: 'video/mp4' }, { src: videoPathAndName+'.ogv', mime: 'video/ogv' } ]); videotexture.autoPlay = false; this._texture = new PIXI.Texture(videotexture); this._texture.baseTexture.on('loaded',this._checkLoaded); which works fine. But, what I wondered was: as I repeat various sections whether I could check whether the video was already in the cache before trying to load? This would save repeated loads. Or does the loader handle this already? Thanks!
  5. I've been working with Pixi for quite sometime with V3 up until now. Recently decided it was time to move some code over to version 4 but have been experiencing some issues with interaction events. I have a button class that originally used both listeners for touch and mouse events to a.) change the visual state of the button on up/down etc b.) perform an action on click/tap. This had been working perfectly fine in version 3 and I could have multiple buttons in a class/container. Switching to version 4 this caused issues with click/tap area where only the last button to be added to a particular class/container will fire this event. All buttons will fire the up/dwn start/end events still though. On upon researching I tried converting them all pointer events and still experience the issue. I'm currently using V4.7.0. I've been trying to pick my way through the PIXI source trying to figure out why the event doesn't fire but it's not clear to me. All I can see is that it doesn't seem to have 'trackingData' when processing the up portion when it does on the one that does fire the tap/click. I've being using Chrome only at this point for Dev tools and tried but desktop and mobile/tablet emulator, both having the same result. I know interaction was reworked for v4 but can anyone give me any pointers as to why those changes have affected my code thus. I don't understand well enough the changes to be able to find the right place to look for a solution. I can't provide the exact code at the moment as it's not a personal project and corporate rules prevent me from doing so. But can give an overview. The class is structured with a parent container (essentially a stage) to add class container to and a class container to display the current button state (current button state can be a graphic, sprite, animation). The current button state container has all the interaction events attached to it. These call binded functions within the class which either change the current state sprite or call a function on click/tap that has been passed in the settings on instantiation (event data is sent to this function). As stated if the event is fired, which it is on the last button added, the function is fired but event doesn't trigger for click/tap on the others. All other events fire normally on each button. I've possibly just overlooked something simple as you get to that 'wood for the trees' state. Any thoughts, suggestions would be grateful.
  6. charlie_says

    PIXI load and access JSON

    HI, Apologies for the rather basic question, but, the almost all of the articles & threads I've found are about loading JSON files in relation to a tileset or atlas. I just need to load some data, it doesn't have to be JSON, it could be csv, but examples are a bit thin on the ground. Is this possible? I have found one example, but it has a separate loader just for the JSON, it doesn't appear to add it into the loader resources - does it have to be done this way? Thanks! <edit> So, immediately after this I got it working by accessing the resources in loader complete method. But, I still wonder if it's possible to access the JSON from the cache as you do with sprites?
  7. mircodj

    Pixi v4 and webgl code effect

    Hi, I wold like to implements one effect that I found in codepen: this is the link of the effects: codepen My question is : Is there one way to implements it in pixi.js. I'm new with this framwork, i tried to search somethink on google but I don't found nothink. Thanks in advanced
  8. charlie_says

    Deployment issue ES6

    I've got an odd issue with the deployment of a PIXI project. I'm creating an ES6 JS file - when I view it through localhost, or push it up to my site, it works fine. But, when I deploy through the end client system, the game fails. This is obviously something to do with their bundling, but I just cannot work around it. I get the error 'PIXI is not defined at...' which it appears it should be, as the PIXI.min.js has been added into the bundled JS file above the game code. I think this is caused by PIXI being a global variable, but I've not been able to get it to work. Anyone got any ideas?
  9. Lorenzo

    Custom filter coord issue

    Hi, i have a problem with a custom filter. I notice that the result of this simple custom filter change when the sprite are moved from js. Seems to be that vTextureCoord are affected by the position.x value: when i change its value, the filter render a different image. precision mediump float; uniform float frequency; uniform float amplitude; varying vec2 vTextureCoord; uniform sampler2D uSampler; float upDown(float v) { return sin(v) * .5 + .5; } void main (void) { vec2 uv = vTextureCoord; float t1 = frequency * 0.2; float t2 = frequency * 0.35; float v = uv.y; float h = uv.x; float off1 = sin((h + 0.4) * mix(1., 6., upDown(t1))) * amplitude * 0.5; float off2 = sin((h + 0.8) * mix(3., 8., upDown(t2))) * amplitude * 1.5; float off3 = sin((h) * mix(1., 2., upDown(t1))) * amplitude * 0.5; uv = vec2( h + off1 + off2 + off3, v ); gl_FragColor = texture2D(uSampler, uv); } How can I get the same image, even moving or scaling the sprite? Thanks in advance
  10. stealman

    Space Ace

    Hello guys ! I would like to introduce my latest game Space Ace - actually the first one that I have done completely as it supposed to be. It is made in HTML5 using plain PIXI and Apache Tomcat server to provide HTML content and websocket listener. Originally it was meant to be PVP game but once I have realized that there will never really be more than one or two players online simultaneously (it is very common among most of indie games), I decided to make it more soloplay focused with multiplayer just as a nice to have. Game controlls and features are described on login page so I will not duplicate it here Feel free to play and enjoy and I am looking forward for some comments, here is URL -
  11. LordMysterious

    Spin a wheel and land on specific segment

    Hi All I'm quite new to Pixi (as in this is day #2), I have a simple circle divided into segments (Wheel of Fortune style). What I want to do is spin it, wait for a few seconds, slow down and stop on a specific segment, with a bit of bounce-back. By the looks of things rotation itself is fairly straightforward, but how would I go about doing this? Many Thanks
  12. Griva

    Pixi hitArea for whole stage

    I have on stage special "workspace" pixi container - I use it to allow user to draw on it. It works perfect if I set hitArea dimensions to renderer width and height but the problem is that user can move this layer or zoom in/out. I think result is obvious, after move/zoom it is not possible to draw on canvas because hitArea "run" out from the screen or it is too small. My question is what is the best actual solution for this (pixi v4)? I was thinking about setting Infinite hitArea but this is not possible. I could set hitArea Rectangle to be like 999999px so it should not be possible to go out of drawing area but is it ok? Can setting very big hitArea slow down interaction manager? Also another option was to replace hitArea (make it bigger) after move/zoom but this is proably not the best idea. Is there any elegant solution to cover this case easly?
  13. Hello! I am working on a Phaser project (however, the issue is PIXI related). I was having issues with blend modes not always being set correctly when reloading my page. After a couple of days me and my colleague found that the PIXI.blendModesCanvas was being set to something like ["source-over", "lighter", "source-over", "source-over", "source-over", "source-over"] etc. I don't know if other people have ran in to this bug, but I thought I would document this here at least, and if it still exists in newer versions of Phaser/PIXI, that is what is causing it. To fix it we just set the PIXI.blendModesCanvas to a correct list when we start loading the game. We are using Phaser 2.6.2 at the moment, and the correct list is: ["source-over", "lighter", "multiply", "screen", "overlay", "darken", "lighten", "color-dodge", "color-burn", "hard-light", "soft-light", "difference", "exclusion", "hue", "saturation", "color", "luminosity"]
  14. Hello, Is it possible to color the background of a container without using graphics of any sort? Some kind of 'native' background color property or so? Thank you. Kind regards, Fennek
  15. speedo


    This is a casino slot game made with pixi.js with high score mode "summerslam" migrated from as3 - to - pixi.js => rendering is super fast
  16. warzonak

    Pixi v4 filters in Phaser

    I would like to use Pixi v4 filters in Phaser node application. I´ve read this tutorial: and all posts about this that I´ve found, but I still don´t know, how am I supposed to load the filter script. For example the outline filter: game.load.script('filter', 'outline/src/OutlineFilter.js'); However, this is not working and I just can't figure out, how to load it correctly. (The path is correct.) Thank you
  17. Hi. I have a newbie question. So I create a new PIXI application, draw a blue square onto it, wait a couple of seconds, and then manually start a function to extract the pixels. The extracted pixels are always black. If anybody could help me find out why this is the case, that would be great. The blue square is correctly drawn and visible, and the extract function gives me a correct array of data, but all pixel information in it is black. As I execute the extract function right now manually, it's not possible that it's extracted too early or something like that. Here are the important bits of the code: initPixi() { let type = "WebGL"; if(!PIXI.utils.isWebGLSupported()){ type = "canvas"; } this.pixi = new PIXI.Application({ width: 0, height: 0, antialias: false, transparent: false, resolution: 1, autoResize: true, view: $('.imgCurrent')[0] } ); } updatePixi() { this.pixi.renderer.resize(this.imgWidth, this.imgHeight); this.pixiDraw(); } pixiDraw() { let rectangle = new PIXI.Graphics(); rectangle.beginFill(0x66CCFF); rectangle.drawRect(0, 0, 200, 200); rectangle.endFill(); rectangle.x = 0; rectangle.y = 0; this.pixi.stage.addChild(rectangle); } pixiExtract { this.pixi.renderer.extract.pixels(); }
  18. Antriel

    Multiplayer online hexagonal minesweeper. Fight against other players, claim your area and steal theirs in a massive world. Reach the top of the leaderboard by having big score. Claim as much of the world as you can for yourself in this puzzle iogame. Play the game here: Developed entirely in Haxe, using pixi.js for rendering, nodeJS with uws for server. Feel free to ask me anything
  19. sHAYM4N

    Realtime winline effect

    Hi all, just after a bit of advice on how best to handle something like the realtime winlines below for a slot game... I currently have it working with PIXI Graphics line to based on the grid which works fine - but leaves little for styling. I've used the glow effect from PIXI-Filters, but that only seems to work on iOS and desktop (Android chrome on a Note 8 refuses to render the lines when the filter is enabled). In previous games I've used simple 9 sliced sprites rotated with different widths to join the sections - but not sure what other methods I could try out here? and which would be the best performance wise too? Thanks in advance!
  20. Muhammad Adnan

    Move stage pivot so that element is center

    Hey everyone, I want to center an element (in this case a graphics element) in the center of the screen. As you can see from my code, I am changing the position of the graphics and bringing it to the center of the screen. I don't want that. I want to actually move the pivot/position of the stage in such a manner that the graphics then looks like it is to the center of the screen. Also, would it be possible to save the original position of the stage?
  21. BasomtiKombucha

    About fonts...

    Hi! I'm doing a thing in pixi (actually, in it's dart port ( but that should be the same for the purpose of this question) and I'm using its text features ( I understand that before rendering a text, you set the style in which to render it, and that the style includes many different things like color, align and font... What I don't get is: where do the fonts come from? In the provided example, they used 'Arial' font and I know for sure that you can use 'Snippet' font as well. Is there any list of all available fonts I can choose from? And will these fonts work the on every machine?
  22. 've been making a bunch of games using PIXI.js (version 3.0.6). However, none of the games work on my Huawei device (android version 5.0.1). Either the screen is completely black, or the screen flickers black, or the screen flickers black for a bit and then goes completely black. After doing some searching online, I've found two possible solutions to what looks like the same problem ( One solution that has been proposed is to change the shader precision value to mediump. However the attribute PIXI.PRECISION. or PIXI.settings.PRECISION does not seem to be available in the version 3 of PIXI. The other solution proposed is to ad the following code before creating the renderer: PIXI.glCore.VertexArrayObject.FORCE_NATIVE = true; However, to do this, I need glCore, and after reading some of the documentation (, it seems like this is built to work with PIXI version 4. Having said that, I don't even know if these solutions would actually fix the problem. Anyway, any help would be much appreciated!
  23. Hi, I want to create a PIXI.Texture from a WebGL texture. Unfortunately, I have not managed this yet. My WebGL texture is created in the same WebGL renderer context as Pixi with "", this works. Then I tried to hang the texture on an existing PIXI.Texture: sprite.texture.baseTexture._glTextures[app.renderer.CONTEXT_UID].texture = myWebglTexture Even without the above line of code, my WebGL texture is inserted into the canvas element and always swaps the texture of the last sprite loaded in Pixi (Change-Texture.mp4). Unfortunately I cannot swap my WebGL Texture with a texture of a specific sprite :-( This approach has unfortunately not worked: Does anyone have an idea? Thank you for your support!
  24. 1. How to resize the window at any time when I change my window size. Something weird will occur in my app now like the image below.(the right size should be black) 2. How can I directly access mouse local position without listening to an event. I want to deliver my mouse local position to the server even if the mouse doesn't move at all. Thx a lot!!
  25. Blackdrazon

    Copying Rendered Sprite to New Texture

    So in my previous post on these forums, I got help using some PIXI filters. Great. Now, I want to turn the filtered result into a new Texture object so that I can use it in a 3rd party system. I basically just need a "screenshot" of the filtered results. Once I have the new texture, I no longer need the original Sprite (at least not for this system). The new texture doesn't need to update or anything like that. I thought I had a potential approach, but it's not working. Just in case I'm barking up the wrong tree, first I want to confirm that I'm going about this in the most efficient manner. First we create the base Sprite and give it the filters in question. Because I want to apply the shaders, I think I need to render the sprite to canvas first, so I try to do so on an off-screen canvas. Last, I attempt to create a new texture using the fromCanvas method. If that's the wrong way to go about this, let's talk about a better way instead. If that is the right way to go about it, here's the problem: fromCanvas never captures the texture. I must be doing something wrong at some stage. Here's the code. Note that instead of using an off-screen canvas, I'm currently using an on-screen canvas, because I wanted to confirm that the image is rendering correctly on the second canvas. It is. // Create the main stage. var width = window.innerWidth; var height = window.innerHeight; var renderer = new PIXI.WebGLRenderer(width, height); document.body.appendChild(renderer.view); var stage = new PIXI.Container(); // Create the offscreen sprite and stage. var offscreenSprite = PIXI.Sprite.fromImage('Base3.png'); /* Code to create and apply filters here. */ var offscreenStage = new PIXI.Container(); var offscreenRenderer = new PIXI.WebGLRenderer(offscreenSprite.width, offscreenSprite.height); offscreenStage.addChild(offscreenSprite); // Put view onscreen for testing purposes. document.body.appendChild(offscreenRenderer.view); It doesn't seem to matter whether I try to capture the texture before or during the main loop. Here's before: offscreenRenderer.render(offscreenStage); requestAnimationFrame(update); var sprite = PIXI.Sprite.from(baseTexture); sprite.x = width / 2; sprite.y = height / 2; sprite.anchor.set(0.5); stage.addChild(sprite); function update() { requestAnimationFrame(update); renderer.render(stage); renderer.render(offscreenStage); } And here's the alternate approach, capturing the texture during the main loop. This version even tries to update the texture during the main loop, even though I don't want to do that. It doesn't help! offscreenRenderer.render(offscreenStage); requestAnimationFrame(update); var sprite; var firstPass = true; function update() { requestAnimationFrame(update); renderer.render(stage); renderer.render(offscreenStage); if(firstPass ) { var baseTexture = PIXI.BaseTexture.fromCanvas(offscreenRenderer.view); sprite = PIXI.Sprite.from(baseTexture); sprite.x = width / 2; sprite.y = height / 2; sprite.anchor.set(0.5); } else { sprite.texture.update(); } } update(); Using console.log, I can confirm that fromCanvas is returning the default, empty results. There's no on-screen results, because the onscreen sprite has no texture. Any ideas?