Jump to content


  • Content Count

  • Joined

  • Last visited

  • Days Won


eguneys last won the day on July 8 2020

eguneys had the most liked content!

1 Follower

About eguneys

  • Rank
    Advanced Member

Contact Methods

  • Twitter

Recent Profile Visitors

1988 profile views
  1. 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.
  2. 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.
  3. 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 -= bo
  4. 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
  5. 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?
  6. 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.
  7. 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.
  8. 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.
  9. 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(ti
  10. 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 grap
  11. 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
  12. 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.
  13. 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
  14. 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`?
  15. I've written a virtual dom library for pixi.js. https://github.com/eguneys/snabbpixi It only supports `PIXI.Container` and `PIXI.Sprite` but you can extend it to work for custom display containers. It's used like this: import * as PIXI from 'pixi.js'; import { init } from 'snabbpixi'; import { h } from 'snabbpixi'; const app = new PIXI.Application({}); app.loader .add("") .load(() => { let patch, vnode; function redraw() { vnode = patch(vnode, view()); } patch = init([]); const blueprint = view(); vnode = patch(app.stage, blueprint); }
  • Create New...