Search the Community

Showing results for tags 'pixijs'.

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

  1. I am creating a game, where a lot of tiles need to be rendered. My goal is to render with this method at least 500k tiles. Since the tiles won't be redrawn every time but moved, this method should work out. I am using the pixi-tilemap library to create a fast & simple renderer to render a dynamic tilemap. The renderer approves itself to work, but .position.set seems to pull the tilemap from the interface away. I know, the function .position.set does not contain the same parameters as the one of the demo, however this function also does not work with the parameters of the demo. Some parameters must be added. The tutorial I have been using this classic demo:
  2. Hi, I'm hoping you can share some ideas with me! I'm making web based games with Pixi.js and I'm having a bit of a hard time working with the graphics design team (this is not a developers vs designers issue!). I'm trying to find the best workflow that might help us both do our jobs faster, but I can't seem to find the right tool for it! The designers sketch and build the app in Photoshop, and I work in Typescript with Pixi. So... what we've tried so far was: they sketch up in PS and then generate all assets with TexturePacker, leaving me with a json file which I can easily import into my game. The downside of this is that I have to position every asset and create every container manually (or rather using a config file, but still that's kinda manual work). Our second attempt was that they sketch up in PS, then export that to Adobe Animate, and using the PixiAnimate plugin, they then create the files for me to use. This has improved our workflow, because I don't need to position anything nor create the containers, but there are still some flaws as they are not able to test interactive elements (they can't see how a button actually reacts unless I implement it), and I would love to not depend on Animate which seems fairly deprecated nowadays, and on an external plugin which is out of our control. Plus, designers (at least ours) do not think as programmers, and they don't make variable names easy for us. PixiAnimate creates objects using the instance name they put on Animate, but they don't follow any guidelines. If they have four items of the same group, they call them "item_1", "item2", "this_is_the_third_item", and "last_one". If there's a tool that can validate this prior to exporting (setting some kind of rules, like prefixes for elements), that would be awesome. So yeah, I'm asking for a magical tool. I know it doesn't exists, and I know some adjustments are necessary on both sides, but I'd love to hear from you guys, how do you work with your graphics team, what do they use and how do they deliver the assets to you! Thanks!
  3. Hi. I'm not a html5 game developer but Front-end developer trying to draw a line chart with pixi.js. So, my question is not about the html5 game but just about how can I use pixi.js correctly. I was recommended this forum from pixi.js official site. Anyway, the problem is chrome browser stopped after about 2 minutes later ticker started. See this code ( It's a simple code for a line chart. 1. Add a basic PIXI container 2. Draw the first line with 4 dots. 3. Add next line every second using PIXI ticker and Change line x position. It works nicely at the moment But about 2 minutes later, the browser is crashed. I don't know why and how can I fix it. Help me!
  4. Hi, I was trying to understand how to use Pixi-spine library that adds support for spine animations for PixiJS . But I did not find anything useful on the internet. Can anyone help me understand it?
  5. I want to restrict the size of the applied filter on canvas. In the below codepen i have set the displacement filter and moving it according mouse position. But the problem is it's covering entire background. I want to fix the size of the filter. I'm new the Pixijs and any help is appreciated.
  6. Hi all.I am a beginner of pixi.js, and using PIXI.Graphics to create a circular progress bar that will move over time, the effect is like the one below: More specifically, the circular progress bar moves over time. So, the graphics is modified constantly, this caused a very serious performance problem and even caused the iOS system to crash. My question is what should I do to implement such a circular progress bar in pixijs? My English is poor, thank you for reading.
  7. I have following tween I used to move an image in my game coords = { x: 0, y: 0 }; tween = new TWEEN.Tween(coords) .to({ x: 700, y: 200 }, 2000) .onUpdate(function() { cardImg.position.set(coords.x, coords.y); }) .onComplete(function(){ redoTween(); }) .start(); function redoTween() { cardImg.position.set(0, 0); tween._valuesStart = { x: 0, y: 0 }; tween._valuesEnd= { x: 700, y: 0 }; tween.start(); } This works as expected. I wanted to re-use the same tween to move the image to a different location. I would like to update "coords" to new location and; call say; tween.start(); Is there a way to do this? What I noticed was I can only use the it once.
  8. No matter what I try or how I implement things, I keep getting some jittery scroll movement. I was using the <canvas> tag before this, without PixiJS and it was a lot of jittery movement. Just one drawImage call per rAF-call would take far more than 16,6 ms. I used the <canvas> for drawing frames. But I also used the transform CSS property for instance. With and without CSS transitions. But currently I'm using PixiJS with a RenderTexture and the scrolling still seems somewhat jittery to me, though maybe less jittery. I'm not drawing vector graphics. I'm drawing images (PNG files actually). When an image has loaded I add it to a somewhat large RenderTexture (4096x4096). Because width of the images don't exceed 1024 pixels, I now store the images inside four columns of 1024 by 4096 pixels. I then have a sprite for which I create a Texture (which I recently found out to be just a reference to a BaseTexture combined with a certain frame). Each time I scroll I create a new Texture pointing to the same RenderTexture but using a different frame. Though at a certain point it seems I need two sprites with textures both pointing to the same RenderTexture but with different frames. Because, let's say, when the first frame starts at 4000 and I need about 800 pixels from the image (e.g. 800 could be window height or screen height) I need to have a frame pointing at the last 96 pixels of the first column within the RenderTexture and a frame which points to the other column, getting the remaining 704 pixels. Should this be a proper way of handling this? Or is there a faster way to handle this somehow? Maybe I could make sure to make the height of the columns within the RenderTexture are dividable by the current window height. Though then it would mean some column height would go unused (but then this would probably be true for all columns, so maybe not such of a big deal). And this reordering would then need to happen each time a resize occurs. I guess a large screen size (regarding height) would not work very well with how I'm handling this now? Any advice would be much appreciated By the way, I'm also using a small easing function which I call via setTimeout when there is movement. But the actual drawing takes place currently in the ticker function. It just calculates current scrolling speed, does not draw anything.
  9. Hello! The project is old so PIXI v.3.0.11 is used. For streaming - Flashphoner via WebRTC Steps to reproduce 1. Start video stream in html video element - stream.start(myDiv) which creates streamVideoElement in myDiv 2. When stream fires STREAM_PLAYING event the method PIXI.Texture.fromVideo(streamHtmlVideoElement) is called and the returned texture is set to the specific PIXI.Sprite instance. 3. Somewhere after this the Firefox browser receives error thrown by WebGl: Additional information The problem is happened very rerely Only Firefox Stream(video element) is not failed after the error In the PIXI source code that means: gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, texture.source); What we tried tried to set video.crossOrigin = "anonymos" to the video element but no success. tried to dispose video like video.src = "" and etc according some advices related to the localStorage caching I know it's not directly linked by PIXI but still I need help. And the image of the current block when exception was thrown.
  10. I saw the playground on Pixi at I have learned that he is using typescript language and running on nodejs. Since I am not familiar with ts and nodejs, I can only access it through http://localhost:8080 after npm dev startup. Now I want to put him. Deployed to the web server on my window so that he can access it on the public network. May I do this?
  11. Ship wrecked Creatures! Save them all and collect as many stars! 250 exciting levels beautiful graphics 5 difficulty levels It works on all devices running IOS and Android fun music and voice creatures Many hours of gameplay LINK: For licensing to write to the email:
  12. I am developing a game in which i have to click an image .after click it will flip and show prize after that i have to move this image and prize towards prize-board.during this movement i have to scale these images to fit into prize-board slot .how to solve this problem. please help
  13. Hey, guys! Did anybody experience this problem with shareAsync? Basically, it seems like shareAsync promise resolves too early and it also depends on a platform. Here is how it looks like in my code: case SHARE_ASYNC: if (p_param) { FBInstant .shareAsync( p_param ) .then( function() { console.log( "*** FBInstant.shareAsync() ok" ); if (p_callback) p_callback( null ); }) .catch(function( p_err ) { console.log( "*** FBInstant.shareAsync() failed: " ); console.log( p_err ); if (p_callback) p_callback( p_err ); }) } else { console.log( "***UPDATE_ASYNC: invalid parameter" ); } break; So, on: 1 On mobile I get *** FBInstant.shareAsync() ok whenever I tap on empty part of the screen in order to close native sharing dialog. 2 On PC I get *** FBInstant.shareAsync() ok whenever I click on Share button while native Fb dialog is being opened. Along with that, Fb throws some POST exceptions (screenshot is attached) I feel like instead, regardless of two cases, I should get *** FBInstant.shareAsync() ok whenever a user clicks Share button (in native window) and *** FBInstant.shareAsync() failed whenever he closes the native dialog. And, of course, no exceptions Any feedback is appreciated!
  14. I am using PIXIJS Canvas Renderer and trying to apply a graphics polygon as mask in a sprite. When add graphics polygon as sprite.mask, i am getting blank canvas. Am i missing something or its just stupid idea? JSFiddle code:
  15. Hello, I am looking into game design, and decided to use the Pixi.js library for a project. The problem is that I am self-taught and unfamiliar with using Pixi. I am trying to resize a renderer created by the Pixi.autoDetectRenderer() method, but doing so messes up a simple background that I have loaded. I believe that the problem has to do with the order in which the program loads, because depending on how I open the website, the canvas may appear blank. When I attempt to load the website without resizing the canvas, the background loads well (when it loads at all). Any help would be appreciated. The small file containing my source code is attached. I apologize in advance for my ignorance! javascriptSrc.txt
  16. Hi Everybody, I'd like to use Spine in a Pixi project (either the latest v4 or directly starting with v5). I use webpack and npm and saw that Pixi his split pixi-spine into a different npm package. According to the readme of pixi-spine the runtime supports spine data from Spine version 3.5 up. But I only have a pretty old version of Spine 2.1.18 essential and don't want to buy a newer version at the moment because of financial reasons. I only use the basis spine stuff, so no deformations or other new (mesh-like) features. Could anybody please tell me why Pixi-spine only supports Spine 3.5 and up? Is it only because of the pro-features, or does it not work with spine 2.1.18 essential data either? Anybody knows what changed? Is it just some keynames in the spine json file, or only added (professional) stuff while the basic remained the same? Or is there more to it? And is there perhaps a version of pixi-spine out there that is able to import spine data from 2.1.18 essential while still using the latest v4 Pixijs (or v5)? Thanks a lot!
  17. Hi ! I have a mobile game based on pixi.js+pixi-spine (let's call it the client). I also have a backend in node.js (let's call it the server). Now, I want to dynamically generate gifs from my spine characters and display/send them from server's side. I have 2 options: generate the gif files on the client, send them to the server store my spine assets on server, generate the gifs server side I'd prefer option 2, but rendering on an headless server seems to not be a straight road. I tried quickly node-pixi, just the require is complaining about window missing. Anybody has experience doing tis kind of server side rendering? Any suggestions?
  18. 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.
  19. Hi, Can anyone tell me please what the best way to hide a "BETTING CONFIGURATION" container by clicking anywhere on the screen other than that container? Actually i'm detecting the mouse coordinates and comparing with the window / container coordinates, but it's good practice? public static isColliding(mouse: any, object: any): boolean { return !(mouse.x < object.x || mouse.x > (object.x + object.width) || mouse.y < object.y || mouse.y > (object.y + object.height)); } this.baseContainer.interactive = true; this.baseContainer.addListener('pointerdown', () => { if (Utils.isColliding(this.mouseCoord, betConfigUI)) { console.log('you are in window space'); } else { console.log('you are not in the window space'); } }) Thanks in advance!
  20. Hello, I have 2 questions regarding the optimization on Pixi.js On this page On the Sprite part it says: Use spritesheets where possible to minimize total textures Sprites can be batched with up to 16 different textures (dependent on hardware) I am not sure to understand perfectly the above statement. So for exemple let says I want to display 40 differents buildings on screen. In term of performance (rendering) would it be better to have a big PNG file with all those buildings inside (that I can use as Spritesheet) or have 40 png ? Also I created a fountain water particle using I have 2 foutains Sprite on my screen looking exactly the same with inside each, a Pixi.particles.Emitter for the water. Is there a way to have some kind of duplicate of the first fountain in order to have only one Pixi.particles.Emitter updating instead of 2. Thank you so much for your answers. Best
  21. Hi, I am trying to display only the text content which is there in pixi example port. Everything is working fine in all the browsers except safari. Earlier it was working fine but from past 2 days it is showing only the white screen. All the assets and sounds are loading in background and I am able to play the sound and all but there is no visibility. Is there any specific reason for this or am I missing something ?. I have added the example script also. Any help will be appreciated. Thanks in advance. var app = new PIXI.Application(800, 600, {backgroundColor: 0x1099bb}); var element = document.getElementById('gameCanvas'); element.appendChild(app.view); var basicText = new PIXI.Text('Basic text in pixi'); basicText.x = 30; basicText.y = 90; app.stage.addChild(basicText); var style = new PIXI.TextStyle({ fontFamily: 'Arial', fontSize: 36, fontStyle: 'italic', fontWeight: 'bold', fill: ['#ffffff', '#00ff99'], // gradient stroke: '#4a1850', strokeThickness: 5, dropShadow: true, dropShadowColor: '#000000', dropShadowBlur: 4, dropShadowAngle: Math.PI / 6, dropShadowDistance: 6, wordWrap: true, wordWrapWidth: 440 }); var richText = new PIXI.Text('Rich text with a lot of options and across multiple lines', style); richText.x = 30; richText.y = 180; app.stage.addChild(richText);
  22. Hi, I'm trying to load 4 images, and then generate array of random sprites, but i get In chrome console: Debug: GET http://localhost:8081/dist/symbol_2 404 (Not Found) BaseTexture.js:795 BaseTexture added to the cache with an id [symbol_1] that already had an entry addToCache @ BaseTexture.js:795 fromLoader @ Texture.js:478 textureParser @ textureParser.js:9 (anonymous) @ Loader.js:614 (anonymous) @ async.js:35 Texture.js:508 Texture added to the cache with an id [symbol_1] that already had an entry addToCache @ Texture.js:508 fromLoader @ Texture.js:479 textureParser @ textureParser.js:9 (anonymous) @ Loader.js:614 (anonymous) @ async.js:35 BaseTexture.js:795 BaseTexture added to the cache with an id [symbol_2] that already had an entry addToCache @ BaseTexture.js:795 My snippet: import * as PIXI from 'pixi.js' const symbols = [ { id: 0, img: PIXI.Texture.fromImage("symbol_1") }, { id: 1, img: PIXI.Texture.fromImage("symbol_2") }, { id: 2, img: PIXI.Texture.fromImage("symbol_3") }, { id: 3, img: PIXI.Texture.fromImage("symbol_4") } ]; export default class Symbol { /** * Generate random symbol tables * * @static * @param {number} reelsCount * @param {number} symbolsCount * @param {(symbolTables: Array<any>) => void} resolve * @memberof Symbol */ public static generateSymbols(reelsCount: number, symbolsCount: number, resolve: (symbolTables: Array<any>) => void): void { let symbolTables: Array<any> = new Array<any>(); for (let i = 0; i < reelsCount; i++) { let symbolTable: Array<any> = new Array<any>(); for (let x = 0; x < symbolsCount; x++) { let randomIndex: number = Math.floor(Math.random() * symbols.length); let id: number = symbols[randomIndex].id; let sprite: PIXI.Sprite = new PIXI.Sprite(symbols[randomIndex].img); symbolTable.push({id: id, img: sprite}); } symbolTables.push(symbolTable); } resolve(symbolTables); } } So, what's the wrong ? It's caching problem or? Thanks in advance.
  23. SamYan

    Doubt Container

    Hi. I just started in Pixi js. Can someone explain to me if a container is used to create different levels of game? Thanks in advance
  24. Hi all. My PIXI.js code doesn't render my sprite. What is the problem? I checked the all file directions and all of them are correct. I get just only black screen. Here is my code: let visibleObjects = []; let pixelDimensionWidth = 1.0; let pixelDimensionHeight = 1.0; let Sprite = PIXI.Sprite; let Application = PIXI.Application; let Rectangle = PIXI.Rectangle; let resources = PIXI.loader.resources; let loader = PIXI.loader; let player = {}; function getWidth() { if(mainContainer != null) { return mainContainer.offsetWidth; } else { return 0; } } function getHeight() { if(mainContainer != null) { return mainContainer.offsetWidth / 2; } else { return 0; } } function resizeCanvas() { if(app != null) { app.renderer.resize(getWidth(), getHeight()); pixelDimensionWidth = mainContainer.offsetWidth/100.0; pixelDimensionHeight = mainContainer.offsetHeight/100.0; } for(let i=0; i<visibleObjects.length; i++) { if(visibleObjects[i] != null) { if(visibleObjects[i].hasOwnProperty('xPercent') && visibleObjects[i].hasOwnProperty('sprite')) { visibleObjects[i].sprite.x = visibleObjects[i].xPercent * pixelDimensionWidth; } if(visibleObjects[i].hasOwnProperty('yPercent') && visibleObjects[i].hasOwnProperty('sprite')) { visibleObjects[i].sprite.y = visibleObjects[i].yPercent * pixelDimensionHeight; } if(visibleObjects[i].hasOwnProperty('widthPercent') && visibleObjects[i].hasOwnProperty('sprite')) { visibleObjects[i].sprite.width = visibleObjects[i].widthPercent * pixelDimensionWidth; } if(visibleObjects[i].hasOwnProperty('heightPercent') && visibleObjects[i].hasOwnProperty('sprite')) { visibleObjects[i].sprite.height = visibleObjects[i].heightPercent * pixelDimensionHeight; } } } } let mainContainer = document.getElementById('main-container'); let canvasContainer = document.getElementById('canvas-container'); let app = new Application({ width: getWidth(), height: getHeight(), antialias: false, resolution: 1, autoResize: true, }); canvasContainer.appendChild(app.view); window.addEventListener("resize", resizeCanvas); loader .add([ "images/games/test/objects.png", "images/games/test/buttons.png", "images/games/test/control.png", ]) .load(setup); function setup() { player = { id: "player", rectangle: new Rectangle(0, 1, 6, 6), texture: resources["images/games/test/objects.png"].texture, sprite: new Sprite(this.texture), xPercent: 50.0, yPercent: 50.0, widthPercent: 3.0, heightPercent: 6.0, }; player.texture.baseTexture.scaleMode = PIXI.SCALE_MODES.NEAREST; player.texture.frame = player.rectangle; visibleObjects.push(player); app.stage.addChild(player.sprite); resizeCanvas(); /*objectCoin = new Sprite(PIXI.loader.resources["/images/games/test/objects.png"].texture); buttonTouch = new Sprite(PIXI.loader.resources["/images/games/test/buttons.png"].texture); buttonKeyboard = new Sprite(PIXI.loader.resources["/images/games/test/buttons.png"].texture); controlLeft = new Sprite(PIXI.loader.resources["/images/games/test/control.png"].texture); controlRight = new Sprite(PIXI.loader.resources["/images/games/test/control.png"].texture); controlUp = new Sprite(PIXI.loader.resources["/images/games/test/control.png"].texture); controlDown = new Sprite(PIXI.loader.resources["/images/games/test/control.png"].texture);*/ } Thank you. I'm new to the forum by the way.
  25. 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.