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. Hey guys! I need to have my site working in Safari 9 and IE11 but I've noticed that there is ES6 code in the pixi.js bundle. Has anybody else encountered this? Looks like it's coming from the mini-signals dependency. I have tried adding pixi.js and mini-signals to my include config for babel-loader but it's still not being transpiled. Any ideas of a solution?
  2. Hi guys! New with PIXI and have some troubles with loading audio with PIXI.loader. startButton.on("pointerdown", function(){ changeLanguage('eng'); startAnimationBoard(); }); espButton.on("pointerdown", function(){ changeLanguage('esp'); startAnimationBoard(); }); function changeLanguage(lang){ if( lang == 'esp'){ sound.add('sceneLogo', './objects/mp3/esp/1.mp3') .add('scenePlay', './objects/mp3/esp/2.mp3') .add('sceneBalance', './objects/mp3/esp/3.mp3') .add('sceneHello', './objects/mp3/esp/4.mp3') .add('sceneInteractive', './objects/mp3/esp/5.mp3') .add('sceneAirport', './objects/mp3/esp/6.mp3') .add('sceneDownload', './objects/mp3/esp/7.mp3') .add('sceneData', './objects/mp3/esp/8.mp3') .add('scenePerson', './objects/mp3/esp/9.mp3') .add('sceneFinal', './objects/mp3/esp/10.mp3') .load(); } else if(lang == 'eng'){ sound.add('sceneLogo', './objects/mp3/eng/1.mp3') .add('scenePlay', './objects/mp3/eng/2.mp3') .add('sceneBalance', './objects/mp3/eng/3.mp3') .add('sceneHello', './objects/mp3/eng/4.mp3') .add('sceneInteractive', './objects/mp3/eng/5.mp3') .add('sceneAirport', './objects/mp3/eng/6.mp3') .add('sceneDownload', './objects/mp3/eng/7.mp3') .add('sceneData', './objects/mp3/eng/8.mp3') .add('scenePerson', './objects/mp3/eng/9.mp3') .add('sceneFinal', './objects/mp3/eng/10.mp3') .load(); } } Works perfect everywhere, except iOs Safari browser. Loading time from 300 ms on desktop Chrome to 1600 ms on old Droid phone (Chrome and Default browser). But mobile Safari loading time is awfull - 35000 ms. Tried to load files separatelly, one by one before using them (don't need them all at once). And still works everywhere except mobile Safari - in this case files didn't load at all. Don't know what I'm doing wrong. But I really tired in this war against Apple gadgets. Thank you! P.S. : iOs versions 10.1.x and 12.1.x
  3. Minus the choice. and adventure. Day Job is a delve into the mundane. Play the role of a generic office worker. What do you do? Work, slack, or consume. Once you finish your day at work a narrative will occur to your character. This is based on your character's personality. Whoa, that's right. Getting psychological up in here. We actually follow The Big Five Personality Traits and narratives and items both affect these traits. Some narratives require a certain range of trait values. The game itself is made using angular2pixi (found here) which we created to integrate Pixi into Angular2+. The code itself should be obfuscated, so no peeking BUT we are more than happy to answer any questions about the development of the game. Overall, making Day Job was a grandly satisfying endeavor and we hope to grow it into something great. The narratives in the game right now are placeholder while we work on the real story. We hope to cleverly explore the human condition and poke fun at capitalism, consumerism, and modern day wage slavery. If you'd like to follow our fledgling game studio or stay up to date on Day Job development make sure to subscribe to us on social media: Enjoy! Browser: Android:
  4. charlie_says

    Penny Drops

    This is a new (well, newish, but only recently completed & released) match 3 game in the style of an old slot machine. Have a play here:
  5. J. K. Sleepling

    Changing image resolution for mipmapping

    Hi there, I'm working on an app showing user uploaded maps (bitmaps). These maps can be of any resolution and often they are very large. Now down-scaling these images they become ugly and crunched, so I need to use mipmapping (Working in WebGL). I know mipmapping only works with "powered by two" resolutions, but is there any way I can resample my odd-sized maps, to fit into a "pb2" resolutioned baseTexture, and still know the original specs. Or how would you work around it? Thanks
  6. Kristiyan

    PIXI - many filters cause fps drop

    Hello everyone! I found that using filters to multiple sprites is causing frame drop(in my case 25 filters). After the frame is dropped, if i remove filters via console , the frame is again 59.9-60.0 . I will append image to show you what i mean.The way i append filter to sprite is in this way : var spritesLen = 25; for(var i=0;i<spritesLen;i++){ someSprite[i].filters = [myFilter] } I hope there is a fix to this issue :) Thanks.
  7. We have atlas exported with Texture Packer. Run-time every texture is cropped by 1 pixel. This pixel is added to the opposite of the texture. Likewise
  8. schubi

    Beppigames Puzzles

    Beppigames Puzzles Two non-casual puzzles I made some years ago, both original concepts. Made all puzzles first on board/paper, no generators involved. Mandatory to read the games rules, in game or on games homepage (game rules link). 1. Sandcastles Direct Link Game Rules A 30 level sliding tile game at the beach. You slide around "digging tiles": Where these cover sand diggings take place. Where your channels tap water they are flooded. Two objectives: 1. Every sandcastle in a level needs to be on its own island. 2. All seastars in a level need to be put into water. Created with plain Javascript and Pixi. 2. Peace Conference Direct Link Game Rules A 47 level logic puzzle based on the Four Color Theorem. You host an intergalactic Peace Conference. Its attended by psychotic politicians of four alien species of the Mars Attacks sort. Not unlike in a nursery your job is to assign every participant a place in the conference room and securing he does not freak out. Two types of rules must be fulfilled by your seating order: A chair rule states a pair of species which cannot be placed on neighboring chairs without raising hell. A table rule states species which must be placed on each table to achieve a pacifying effect in the room. In later levels you are assisted by staff of expertly skilled therapists (in martial arts ?) which can keep aliens in check even when chair rules are violated. Initial game was Android and a Java/C++ mix. Replaced the Java part with C++ and SDL and created the HTML5 version utilizing emscripten. You can mute the music in game options ("Silence"). For both puzzle games there are solutions available: Solutions
  9. SamYan

    Resizing Game Problem

    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 }); = '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
  10. Here I want to do a parabola of basketball。 I thought of using Pixi, but Pixi had no good built-in methods. Here is a demo I want to achieve:;He looks pretty good! How do I achieve this basketball track? And basketball has the feeling of radian.
  11. This is my code right now to check if left or right mouse button is down: // Left button down app.stage.on("mousedown", function() { // code... }); // Right button down app.stage.on("rightdown", function() { // code... }); But it doesn't seems to be possible that both events happen at the same time. How would I check if both mouse buttons are pressed? Left and right.
  12. Yehuda Katz

    Update group's alpha without a delay

    Hello, Is there any way to force Phase to update texture without a delay? Shortly said, I have issue with Phaser.Group.generateTexture() method: 1) Lets say you have group, which fade out to alpha = 0. 2) Later you want set group back to alpha = 1 and 3) generate sprite, 0, group.generateTexture()) RESULT: you will get empty sprite... However, if I do lets say 100ms delay, everything works as expected... If I fade out group to 0.1 instead of 0, I am getting texture with 0.1 transparency, which means that PIXI needs time (one tick?) to actually update alpha. QUESTION: Is there any way to fix this problem? Thanks
  13. AlbertoVGDD

    Can´t manage AnimatedSprite to work

    Hi, I am complete beginner with JavaScript and pixi.js. I've been learning these days the basics (sprites, shapes, text, buttons...) following the tutorial on the GitHub page. I was planning to use now animated sprites (using a sprite sheet) and found this on the documentation for the version I'm using (v4.8.2). That page contains a piece of code that doesn´t work on my project, and it is not recognised by vscode's intellisense either. // The more efficient and simpler way to create an animated sprite is using a {@link PIXI.Spritesheet} // containing the animation definitions: PIXI.loader.add("assets/spritesheet.json").load(setup); function setup() { let sheet = PIXI.loader.resources["assets/spritesheet.json"].spritesheet; animatedSprite = new PIXI.extras.AnimatedSprite(sheet.animations["image_sequence"]); } Is it deprecated, or am I missing something that is not mentioned there? Thanks in advice for your help. EDIT: I attached some pictures that showcase my issue.
  14. Rodrigo

    CanvasTinter newb question

    Hello, I was working with a simple canvas app (for now we can't use the webgl renderer so we're stuck with canvas) and we're trying to colorize some sprites. Since we're using canvas filters and shaders are out of the question so I was wondering if this is somehow possible using canvas?. I created a simple test using canvas tinter but the result is a fully painted canvas and not a tinted texture: const app = new PIXI.Application(800, 600, { backgroundColor: 0x9cbac9, autoResize: true, forceCanvas: true }); document.getElementById("app").appendChild(app.view); const bgTexture = PIXI.Texture.fromImage(""); PIXI.CanvasTinter.tintWithMultiply(bgTexture, "rgba(179, 179, 179, 0.5)", app.renderer.context.canvas); const bg = new PIXI.Sprite(bgTexture); app.stage.addChild(bg); Here's a live sample: Thanks, Rodrigo.
  15. il7 Games

    What does it take to learn Pixi?

    Hello Devs, I would like to know, what do I need to learn to play with PixiJS? I want to create advanced games in 2d. I know Pixi is not a game engine and there are other frameworks like Phaser, Cocos2D, MelonJS and so on... Pixi will be useful to me to develop other projects besides games. Perhaps the most experienced here can give me tips and also other people who are having difficulties. Thanks.
  16. jinzo7

    PIXI version 5?

    Hello, PIXI friends! Still PIXI on the top ofcourse, our team is going to migreate the apps from 3 to 4. And we like very much PIXI. The exploring(chill) time comming for us and it is it time to form everything better. When version 5 will be stable? Why it is better ? It has better performance? We need to know everything, I need! LOL! Is version 5 is going to have good support of PIXI-Animate(Adobe animate) ? Tell me everything, please!
  17. Hello,guys! In the old days you remember Flash/AS3. There were free Flashdevelop IDE. It was perfect. You use all libraries in flash with perfect auto-completion, perfect debuging and so on. When flash is old and grumpy now every work with it is stopped of course. The perfect substituent of AS3 + Flashdevelop IDE we explored is Typescript + PIXI + Webstorm + Typescript namespaces - okay. But typescript + webstorm are made for angular applications so you understand there is bunch of problems. We were under pressure and had to create everything fast. Now we have time to explore for the best solution. Big games/applications can be made of pure javascript and it is trash - our opinion and experience. Can you tell your opinions, your experience, best practices and so on on Typescript, PIXI , IDE, other libraries and so on ? Lets make better code!
  18. vshalakbari

    Unable to decode image in IE

    On refreshing in internet explorer png images are not decoded and assets are not loaded. Only when tab is reloaded, it works in fresh tab for the first time. It happens in PIXI 4.5.1
  19. Hello! I'm find the perfect animation example but it works only on one image and in default mode (autoplay on page load). I need to init this only on mouseenter event and for each current image. This is example in codepen I'm found contidion to mouseenter and mouseleave event if ( options.interactionEvent === 'hover' || options.interactionEvent === 'both' ) { slidesContainer.pointerover = function( mouseData ){ mouseX =; mouseY =; displacementFilter.scale, 6, { x: "+=" + Math.sin( mouseX ) * 100 + "", y: "+=" + Math.cos( mouseY ) * 100 + "" }); rotateSpite(); }; slidesContainer.pointerout = function( mouseData ){ displacementFilter.scale, 1, { x: 0, y: 0 }); cancelAnimationFrame( rafID ); }; } The default animation settings is: if ( options.autoPlay === true ) { var ticker = new PIXI.ticker.Ticker(); ticker.autoStart = options.autoPlay; ticker.add(function( delta ) { displacementSprite.x += options.autoPlaySpeed[0] * delta; displacementSprite.y += options.autoPlaySpeed[1]; renderer.render( stage ); }); } I thought I can do something like this if ( options.interactionEvent === 'hover' || options.interactionEvent === 'both' ) { var ticker = new PIXI.ticker.Ticker(); ticker.autoStart = options.autoPlay; ticker.add(function( delta ) { displacementSprite.x += options.autoPlaySpeed[0] * delta; displacementSprite.y += options.autoPlaySpeed[1]; renderer.render( stage ); }); } This is pen with that "changed" part Also I need to load all items, but loads only one item. Why? Thanks
  20. Hi, I'm an animator and I have no knowledge regarding coding and programming. recently our parent company (game developer) told us we could use pixie particles online editor for creating particles in HTML5 games and the asked us to go to the "" and create an emitter so they could use that particle in our designs. I realized it would be better if I could make an HTML file to preview the particle. a very simple animation to send the particle spawning point around a square. like this the problem is, the deeper I go the darker it gets!!! the problem is I don't even know what I have to learn before attempting to make it work!!! is it HTML? is it java? do you call it Scripting ??? is the place to go to get information? so far I think I need to create a server? install Pixi js (i don't know how) install npm ?? (I don't know why?) this is very confusing write know
  21. gsknbabu

    Infinite Scroll

    Hi, I want to allow the user to either scroll to document bound borders endlessly i.e Infinitely drag on the canvas. Please help!!! Ex: A canvas created with 1000*1000. And Enabled PAN and Zoom on the canvas. Draw a rectangle on the canvas and move the rectangle with mouse to the edge of the boundaries( top,right, bottom, left) it should scroll the the rectangle to the end of the canvas. Right now my issue is I can drag the rectangle till the browser boundaries. I need to allow the rectangle to drag beyond the content so that I can use the full canvas. I can PAN the canvas to move around the browser. Please refer the link where user can start dragging the rectangle to the boundaries, scrolls automatically towards the mouse pointer. Thanks, Naveen.
  22. Siddi

    Dispatch Events

    Hi, I'd like to develop some automated UI tests for my PixiJS application (PixiJS 4.8.1). My test procedure should look something like this later: const test = new UITest(){x: 100, y: 80}) test.drag({x: 100, y: 80}, {x: 120, y: 40}) test.dblClick({x: 200, y: 120}) etc. For this I have to trigger events. I know that the InteractionManager and DisplayObject inherit from EventEmitter. Which option is the best way to trigger events? 1. directly on the canvas element? const originalEvent = new MouseEvent('click', { bubbles: true, cancelable: true, ... }) app.view.dispatchEvent(originalEvent) 2. or via app.renderer.plugins.interaction.onPointerUp (originalEvent) for example? 3. or via app.renderer.plugins.interaction.emit(originalEvent) Unfortunately, I have not yet managed to trigger an event with these three ways 😞 What already worked was to call the emit method directly on a PIXI.DisplayObject, but I needed to create a PIXI.InteractionEvent object myself, which was quite expensive ... Thanks in advance! Siddi
  23. The chart that is built on PIXI had sharpness problems and those sharpness problems were solved after avoiding half-integers and linestyle alignment. But now chart has some dark spot when plotting a diversified data in a large number of a dataset and for a small dataset, can't see any dark spot on the chart. I am not sure changes that have done for solving sharpness is causing this problem. Kindly support me to solve this problem.
  24. AndrewJS

    Fastest way to do masking?

    Pixi usually performs really well even with heavy scenes. I can put hundreds of objects, even thousands of particle sprites and get 60 FPS on mobile. I typically only use a single masked object in a scene but recently needed to use more and I was surprised at how badly Pixi performed with masked objects. For every masked sprite, I lost about 5 FPS on mobile (both Android and iOS on old and new phones, newer phones actually performed worse in some cases). By the time I added 4 masked sprites, I was down to 40 FPS, adding 10-20 masked sprites dropped to 20 FPS with really bad stuttering. As soon as I switch the mask off by removing the assignment, it goes from 20 FPS to 60 FPS, even with 200 of the same sprites. It doesn't seem like it should take so much resources to do masking given all the other effects that are possible. Tinting for example, adds a value to every pixel and costs nothing. Masking is just checking a pixel in one object and setting the equivalent pixel in the other object. Is there a faster alternative to using object.mask = mask? Is there a graphics buffer I can use to set the pixel values myself, e.g if I could create an array of pixel values and generate a texture buffer from that. Javascript is pretty fast with arrays. The main thing that bothers me is that the low performance happens with static masks. I could understand the performance hit when the sprite is animating relative to the mask but not when they are both static. Why doesn't it buffer the masked sprite and use that over and over like a normal sprite? I found a thread that describes the same issue, unfortunately I'm stuck on v3 for now: I just found the following with a possible alternative using multiply blending: To isolate it, it suggests using a voidfilter. Is this the fastest way to do masking in Pixi? If so, is there example code for this? Say that I did at some point want to draw a texture pixel by pixel, one way would be to draw a tinted 1x1 pixel sprite into a render texture. Is there a better way than this e.g set values in a buffer and convert it to a texture? Is there a way to read a pixel color/alpha value from a sprite or texture. There seems to be an extract function for WebGL and Canvas but it looks like this extracts the viewport. It would be good to be able to render sprites to a rendertexture and be able to read the pixel values of that texture using pixel co-ordinates.
  25. Hello, developers! I am wondering about PIXI v.3 or v.4, how much they can live and work on the internet. Imagine now I start big project on v.3 or v.4. This project should be licensed with little exceptions. Should I extract the whole code related to PIXI(my view) to be specially maintained over the time? What is the experience on similar cases? What is the risk?