eguneys

I have this code to detect both left click and right click: this.pan_container.hitArea = Rectangle(0, 0, this.gw, this.gh) this.pan_container.interactive = true this.pan_container.on('pointerdown', on_pan_begin) this.pan_container.on('pointermove', on_pan_move) this.pan_container.on('pointerupoutside', on_pan_end) this.pan_container.on('pointerup', on_pan_end) Problem is right click opens up the context menu, which I do not want. I want right click event to preventDefault() so it doesn't open any context menu. I've seen this issue, I've tried setting both to true and false but I couldn't disable the right click context menu pop up. this.App.renderer.plugins.interaction.autoPreventDefault = false; this.App.renderer.view.style.touchAction = 'auto'; https://github.com/pixijs/pixijs/issues/4824

I have managed to run a mobile game using cordova. See my example repo: https://github.com/eguneys/candy-mobile. Here's my app style: <style> #app { position: relative; width: 100vw; height: 100vh; margin: auto; } </style> And put your initialization code in `onDeviceReady` callback.

I have the same problem, First of all I don't know how to set the x y position of the sprites. Is it relative to canvas size (like x = width * 0.2) or absolute positioning. I think one can make an editor for positioning sprites. Or make helper functions to layout the sprites horizontally or vertically with some margin. Also you should use hot reloading, so you don't have to refresh everytime.

When I set the resolution with PIXI.settings.RESOLUTION = window.devicePixelRatio; if this is greater than 1, when I drag an item, mouse position is getting higher than actual, so the dragged image is getting more to the left. I've set up an example to show what I mean, try dragging the red rectangle: https://stackblitz.com/edit/js-yxp7ed This is how I get the mouse event position: function eventPosition(e) { let x = e.clientX, y = e.clientY; let bounds = canvas.getBoundingClientRect(); x -= bounds.x; y -= bounds.y; return [x, y]; } Some information about why I would want to use this RESOLUTION = devicePixelRatio feature would be cool.

Just wanted to show my latest game here A solitaire card game with three different game types. Solitaire Spider and Freecell. Currently freecell is not implemented, but the other two is working. Anyway feel free to have a play. Play the game here It's written using Pixi.js and open source View the source code here

I wonder when are the textures uploaded to the gpu, this is my understanding so far: This happens in `TextureSystem`'s `bind` method, which is called in `Prepare` plugin's `uploadBaseTextures` method. This is registered via `registerUploadHook`, which is in turn called in `prepareItems`, that is called from tick method. `tick` method is registered to be called in `upload` method. Now I don't know when this `upload` method is called from. Is this even correct information?

You can use PIXI.js for rendering textures on canvas with scale rotation etc. and a scene graph and a game loop and asset loader. You have to code scene transitions, object pooling yourself.

I have a texture atlas with sprite frames at x y w h; 0 0 16 16, 16 0 16 16 , when I try to render this frame textures side by side with no gap, I get black lines in between. I asked this question on SO https://stackoverflow.com/questions/60702397/texture-bleeding-despite-disable-mipmaping-and-half-pixel-correction. The problem happens when I use Pixi.

What if I want to quickly test iterate on level design, being able to quickly play the game possibly in editor is a great feature. Because I have to adjust the level to the jump physics of the character.

I want to make an awesome 2d platformer like celeste , where there is moving platforms moving hero, spikes enemies, etc. but don't know how to get started. I am thinking storing tiles in a map like so: let tiles = { '00': { texture: 'grass' } }; This is fine when everything is a single tile, but some objects occupies multiple tiles. So I thought make a function to handle that case: this.addHero = (pos) => { let { head, torso, armsLeft, armsRight, legs } = heroPos(pos); syncEntity(tiles[pos2key(head)], entityHero('head')); syncEntity(tiles[pos2key(torso)], entityHero('torso')); syncEntity(tiles[pos2key(armsLeft)], entityHero('armsLeft')); syncEntity(tiles[pos2key(armsRight)], entityHero('armsRight')); syncEntity(tiles[pos2key(legs)], entityHero('legs')); }; moving these objects require moving all tiles they occupy. Also I need a level editor, which I've built one where you can edit individual tiles, maybe I can extend it to place multiple tile objects. The hero movement doesn't use physics, but hardcoded like move 2 tiles if pressed right, fall if standing. And collision detection is just checking if the tile is occupied. I can't get very far with these limited set of ideas. What should I do?

I have a bunch of points, that forms a rectangle when drawn like this: points.forEach(([x, y]) => { let sprite = spritePool[getASprite]; sprite.position.set(x * 4, y * 4); }); I can animate these points and have a moving rectangle. Now I want to fill this rectangle with some animated texture. But I don't know how. I tried to do masking, with graphics like this: let graphics = new PIXI.Graphics() sprite.mask = graphics; // on update loop graphics.clear(); points.forEach(([x, y]) => { graphics.lineTo(x * 4, y * 4); }); But the mask didn't work properly. Maybe a flood fill algorithm can determine the points inside the rectangle, Or any other solution to how to make it like in celeste game? Here's a demo: https://eguneys.github.io/jsgames/work.html

Are you saying TilingSprite will only work for the whole stage that is entire application. Can I make it work inside a display container? I want to make the tiling image bigger. For example: // What is this width/height corresponds to, why is it set to renderer.width, can I set it to the texture size. let tsprite = new TilingSprite(texture, width, height); // I want to make the sprite bigger. Setting the width/height doesn't work. Why `tileScale` why not just `scale`? tsprite.tileScale.x = 2; tsprite.tileScale.y = 2; // Now I don't know the width/height of this sprite I have to position it to the bottom. // Do I just have to eyeball the position and set it to some ratio of the displayHeight, // so it becomes responsive? // tsprite.position.y = displayHeight - tsprite.height tsprite.position.y = displayHeight * 0.7; Here's the demo https://eguneys.github.io/jsgames/work.html And here's the repository: https://github.com/eguneys/orb

I have a tiling image that is 300x200 I want this image to sit on the bottom of game canvas and tile only horizontally. The example given sets the size in constructor with renderer.width/height that doesn't work if this size is smaller.

I want my game to resize to the 100% window width and keep an aspect ratio. I have this css solution: <style> #app { position: relative; width: 100vw; height: 0; padding-bottom: 65.5%; margin: auto; } </style> <div id="app"></div> let element = document.getElementById('app'); let displayWidth = element.clientWidth, displayHeight = element.clientHeight; const app = new PIXI.Application({ width: displayWidth, height: displayHeight }); Now I want to add a background image, with a size 800x600. This image covers whole display area fine, but if the window size is greater than 800, the edges go black. I am not sure how to size my application, and what to do if it exceeds the image size. Should I stretch the image, or set maximum height of game to be image size.

I am trying to learn how to render 2d sprites using webgl. I use this to render a single quad: let positions = [ -1, 1, -1, -1, 1, -1, -1, 1, 1,-1, 1, 1 ]; gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(positions), gl.STATIC_DRAW); Now I want to render more sprites, do I have to setup positions like this for each sprite and call `gl.drawArrays`?