eguneys

Members
  • Content Count

    192
  • Joined

  • Last visited

About eguneys

  • Rank
    Advanced Member

Contact Methods

  • Twitter
    __ephan

Recent Profile Visitors

1466 profile views
  1. 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.
  2. 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.
  3. 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?
  4. 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
  5. 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
  6. 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.
  7. 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.
  8. 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`?
  9. 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); }; function view() { return h('container', [ h('sprite', { texture: PIXI.Texture.from('image.png') }), h('sprite', { texture: PIXI.Texture.from('image.png') x: 10, y: 10, height: 100, width: 100 }); ]); } Please take a look and use it, I will try to improve it as I make more games.
  10. I am trying to build a tile based game. The game stutters when the game scrolls to follow the player. You can see the effect in official Phaser examples: http://phaser.io/examples/v2/tilemaps/tile-callbacks This one is more smoother however: http://phaser.io/examples/v2/tilemaps/map-collide Is this the best performance Phaser offers? What causes this and how can I make it extra smooth?
  11. You can also read my free article http://www.sitepoint.com/javascript-game-programming-using-phaser/, about how to structure levels for a Phaser game.
  12. You should use and adapt a phaser template like a yeoman generator. It will generate the boilerplate for you and you will only have to code your game. https://github.com/rblopes/my-phaser-template
  13. Hello, I am trying to use phaser with es6 using this project. How do I add a new spritesheet?
  14. I have this website http://www.jsgamesonline.com/play/1, on the top there is a Phaser game, it captures Spacebar key as game input. Scroll below, there is a feedback form. User can write feedback, but Spacebar is not working there. How can I disable Phaser capturing Spacebar for that form. If not possible, what is a proper solution for this?
  15. I've written a tutorial about how to manage many states for different levels here: http://www.sitepoint.com/javascript-game-programming-using-phaser/. The next thing you can do is to read source code for phaser projects. Also take a look at yeoman generators: http://yeoman.io/generators/