• Content Count

  • Joined

  • Last visited


About bubamara

  • Rank
    Advanced Member

Contact Methods

  • Website URL
  • Twitter

Profile Information

  • Gender
    Not Telling
  • Location

Recent Profile Visitors

1,708 profile views
  1. bubamara

    Asset management with Spine on the Web

    @komali2 https://github.com/pixijs/pixi-spine/blob/master/examples/hack_texture.md
  2. bubamara

    Best way to draw rectangle with border

    Sorry, I should have been clearer : it depends on your use case and Pixi version. For example if you are using Pixi 4.x and mixing up NineSlicePlane with Sprites, then above mentioned Sprite-Sprite approach should be noticeably faster. Pixi 5.x can batch mesh (NineSlice) with Sprite, thus making speed difference less visible. On the other hand Pixi 4 seems to have better raw performance than v5, feel free to compare yourself : https://themoonrat.github.io/webgl-benchmark/ And when you have mentioned that you are updating them often, then it's another reason to try pure sprites approach. Anyway, would love to hear your conclusion if you find a time to compare :)
  3. bubamara

    Best way to draw rectangle with border

    sprite with another slightly smaller sprite as it's child
  4. bubamara

    Pixi.js Showcase

    I was comparing all 3 - dev, master & alpha
  5. bubamara

    Pixi.js Showcase

    @themoonrat it is pretty much expected Pixi to be a lot faster than Phaser2 and taking advantage over Phaser3 when it comes to sprite+graphics batching. But I'm seeing a huge slowdown with BitmapText rendering, while Phaser3 is rock solid at 60fps. 10000 instances, Pixi 3.0.11 - ~58FPS, 4.0.3 - ~43fps, 4.8.5 - ~40fps, 5.0.0-alpha.3 ~38fps Why is that? Is it caused by trade-off between raw performance and more complex batching (closer thing to real life usage) in v5?
  6. this is new stuff, you have to use Pixi v5.x
  7. bubamara

    performance issue, sprites with jumpy movement

    making them invisible is enough
  8. bubamara

    performance issue, sprites with jumpy movement

    no, create a poll of sprites with same texture and just reasign textue to what you need when it becomes visible
  9. bubamara

    performance issue, sprites with jumpy movement

    Usually you don't want to be creating and removing sprites in the main loop. Better would be to create pool of sprites ahead, making them invisible when they are not needed (theChild.visible = false) and visible again later on
  10. you can create individual textures from spritesheet by passing frame rectangle to PIXI.Texture constructor http://pixijs.download/dev/docs/PIXI.Texture.html
  11. bubamara

    Resizing Game Problem

    You're welcome. And if you want to go further, you can implement 'safe area', which is nicely explained here : http://www.williammalone.com/articles/html5-game-scaling/
  12. bubamara

    Resizing Game Problem

    @SamYan is this working for you? http://jsfiddle.net/om0hskfy/8/
  13. bubamara

    Question about resolution

    of course you dont want mobile devices to be rendering at resolution 4. I meant something like this : var resolution = Math.floor(window.devicePixelRatio ? window.devicePixelRatio : window.screen.deviceXDPI / window.screen.logicalXDPI) || 1; if (resolution > 2 || device.isDesktop) { resolution = 2; }
  14. bubamara

    Question about resolution

    1. yes, more pixels to draw 2. yes. for example you can read window.devicePixelRatio and set renderer's resolution accordingly, because there's a big probability that device with higher devicePixelRatio (and thus display resolution) needs more performant GPU. not sure about changing renderer's resolution on the fly, but I think safest way would be to destroy and recreate renderer
  15. bubamara

    Combining sprites into a single sprite

    you need to preload your textures first. paste this into pixi examples page var app = new PIXI.Application(800, 600, {backgroundColor : 0x1099bb}); document.body.appendChild(app.view); PIXI.loader .add('bunny', 'required/assets/basics/bunny.png') .add('head', 'required/assets/eggHead.png') .load(onAssetsLoaded); function onAssetsLoaded(loader, resources) { var container = new PIXI.Container(); var sprite1 = new PIXI.Sprite(resources.bunny.texture) var sprite2 = new PIXI.Sprite(resources.head.texture) sprite1.x = 0; sprite1.y = 0; sprite2.x = 32; sprite2.y = 0; container.addChild(sprite1); container.addChild(sprite2); var tex = app.renderer.generateTexture(container); var combinedSprite = new PIXI.Sprite(tex); app.stage.addChild(combinedSprite); } as jonforum suggested, see the tutorials together with pixi sources. may be WTF at the beginning, but will be same with other rendering engines/frameworks