• Content count

  • Joined

  • Last visited

  • Days Won


caymanbruce last won the day on June 27

caymanbruce had the most liked content!

About caymanbruce

  • Rank
    Advanced Member
  1. The container just jitters to left or right (I can't tell which direction as it happens too fast). Also if I want to place a PIXI.Text at the bottom left of the camera, I used to do it like this: this.textInfo.x = + 35; this.textInfo.y = + this.renderer.screen.height - 40; Then the camera position changes with the player. Camera is a plain object not a PIXI object here. But how can I do this using "toLocal" method? I do it like this: const pos = this.container.toLocal(new PIXI.Point(35, this.renderer.screen.height - 40)); this.textInfo.position.set(pos.x, pos.y); But it creates a new PIXI.Point on every update which is not optimized. Any better solution? One other thing I notice is that using toLocal for all the positions in animation makes my game look less smooth. Not sure if it is because I coded it incorrectly
  2. i want to zoom to player position using pixi features. According to this comment. A camera is as easy as setting container pivot point to user position and move the container position to the canvas center. How about do a little more and zoom to the user position and make it look natural? I am currently using this const scaleDelta = -0.1; const offsetX = - (user.x * scaleDelta); const offsetY = - (user.y * scaleDelta); const currentScale = container.scale.x; let nScale = currentScale + scaleDelta; container.position.x += offsetX; container.position.y += offsetY; container.scale.set(nScale); This works when I am not using a camera, but looks jumpy when I add a camera. What is the solution with a camera?
  3. i think viewport means the camera object you mentioned in your question.
  4. thanks i havent looked into this optimization before. i dont have enough time to rewind back to pure canvas2D APIs for now. Do you mean i can still do the optimization with PIXI using canvasRenderer? If so i am a bit released. Otherwise i might need to switch to webGL and rewrite it with Canvas2D later when I feel necessary.
  5. Ah that'll be a long battle. When I began my project I started with Canvas2D but after a few months of struggling I found PIXI. Now I thought I am so close to finishing my game but I have to rewind back.
  6. I render it on every PIXI.Graphics object. Maybe that is the problem. But I don't know how to render it as a whole. Here is a small demo I make on a tiny map: How to improve this? In this small demo I am pretty sure it logs as WebGL when I turn on WebGL. You can see I have set "forceCanvas:true" in the Application. And here is the log info.
  7. I have tried using RenderTextures on simple PIXI.Graphics but still get the performance hit. I think it's time for me to use some tricks. But can you shed some light on me about the caching tricks? I have tried "CacheAsBitMap" but not sure if I need to use that every frame because the foods can disappear and respawn every frame. Using it every frame may also be costly. And I have read that using off-screen canvas object can improve performance. But I have already used that in creating sprites. I have read that using integer positions performs better than floating point positions, so I have tried using "roundPixels: true" but it has no effect on anything. I tried using Math.floor on the positions but the movement, especially rotations are ugly. I have read that instantiating less objects will do the trick but all I have is a container with a dozen of sprites which are created before animation start. I can't find anything more useful at the moment.
  8. I use forceCanvas like this, am I missing something? global.gameWidth = window.innerWidth; global.gameHeight = window.innerHeight; const renderOptions = { backgroundColor : 0x00213C, autoResize: true, forceCanvas: true, resolution: window.devicePixelRatio }; const app = new Application(0, 0, renderOptions); app.renderer.autoResize = true; = "absolute"; = "block"; app.renderer.resize(global.gameWidth, global.gameHeight); document.body.appendChild(app.renderer.view);
  9. @Jinz i have also thought about that, forcing all users to enable webGL. but many users are not aware about what webGL is and some browsers might not enable webGl by default. I am a little worry about my game will not reach many of those less tech-savvy people.
  10. @themoonrat thanks now i know that WebGL performs better with pixi.js. But i thought setting the forceCanvas option to true in PIXI.Application will force it to use CanvasRenderer which isnt the case. Also, based on what you said, I guess I need to write my own CanvasRenderer for my game?
  11. I thought this is simple work in PIXI.js. All I put are some simple circle shape sprites on the map and animate them. I am using temporary canvas object to build the sprites. But when should I use RenderTexture? Is RenderTexture faster than using canvas like this? const canvasObject = document.createElement('canvas'); ... const texture = Texture.fromCanvas(canvasObject); const sprite = Sprite.from(texture); I have tried using RenderTexture before. But some features are missing in this class, maybe I just don't know enough of it. When using RenderTexture, I need to use an image or a PIXI.Graphics object to draw it on a renderer, which doesn't allow me to use gradient color because I can't get the canvas context. UPDATED: I realize I can turn on WebGL in Chrome browser on my Macbook Air. Shame. The frame rate goes up instantly from 35 FPS to 60 FPS. It's very smooth. I think PIXI.js team has done tons of work improving performance of WebGL. But why is Canvas2D performance so bad in comparison? One other thing I don't understand is I have used "forceCanvas: true" in my Application setting, how come turning on WebGL gives a performance boost to my game? Having said that I still hope to develop my game in Canvas2D just because other io games can do it without client performance issue.
  12. Do you mean it is a problem or not a problem? I am confused with your words in italics as you suggest I use webGL. Thing is, I can play other io browser games on my laptop very smoothly, and my laptop doesn't support webGL, which means those games are built in Canvas2D. Hence in theory if I optimize my code correctly it should be as smooth as those games without using webGL.
  13. @Jinz I am using PIXI.extras.TilingSprite for the map. But I think the main problem is the player sprites. As I add more sprites onto my player it gets really slow. When it has 50+ sprites it is slow as hell. Average FPS is 14 ~ 20. I think the same applies when there are multiple players on the screen. But PIXI is supposed to be capable of handling thousands of animated sprites. Why would this happen? I add the sprites only once and create them using "Sprite.from(canvasObject)". Would that be any problem?
  14. @Jinz I have taken out the network stuff, and only run the local player with the server on. So there is only one player moving on a 10000 X 10000 TilingSprite map with a background picture preloaded. The FPS is 45 ~ 54 in Chrome, is this normal? Can I get to 60 FPS with single player?
  15. @Jinz But this doesn't happen in on PC. I can resize it to any resolution without any problem. I have tried it on Mac but the resizing only works in Safari. In Chrome I can't move the player to other directions when it is full screen. But still, this result is much better than my project.