All Activity

This stream auto-updates     

  1. Past hour
  2. Yesterday
  3. Yes, its fine.
  4. Thank you! I wrote a class to handle height maps from png images! class HMap { constructor(img, offsetX = 0, offsetY = 0){ this._w = img.width this._h = img.height this._offsetX = offsetX this._offsetY = offsetY this._data = this._getData(img) } _getData(img){ const canvas = document.createElement('canvas') canvas.width = this._w canvas.height = this._h const context = canvas.getContext('2d', { alpha: false }) context.drawImage(img, 0, 0, this._w, this._h) return context.getImageData(0, 0, this._w, this._h).data } pixel(x, y){ if ( x < this._offsetX || x >= this._offsetX + this._w || y < this._offsetY || y >= this._offsetY + this._h ) return [this._data[0], this._data[1], this._data[2]] const i = (y - this._offsetY) * this._w * 4 + (x - this._offsetX) * 4 return [this._data[i], this._data[i+1], this._data[i+2]] } } And I get img from "PIXI.loader.resources['height_map.png'].data"! Is it ok? I could not find anything about "texture.baseTexture.source" or "texture.baseTexture.resource.source" in docs or source files.
  5. > As Ivan said it first, telepathy doesn't work here, I mean sometimes it works but not in this case, sorry
  6. You need to choose your words carefully, "the original mouse enters the phone to determine whether to connect" doesn't mean much because: 1. there's no mouse to use on a phone 2. "the mouse enters the phone" doesn't mean anything to us. It might be very clear for you but it really means nothing for us. 3. "to determine whether to connect". Again, this might be very obvious for you but it really doesn't mean anything for anyone who doesn't know what your app is supposed to do. As Ivan said it first, telepathy doesn't work here, we don't know what you are talking about because we don't know what your app does.
  7. Greetings, Here are this week’s new tracks. Free to use with attribution: MAGICAL BACKSTORY – (Looping) – This might sound nice under the menus, backstory, etc., in a mystical fantasy game, RPG or maybe a visual novel. https://soundimage.org/fantasy-8/ DRIFTING AWAY IN PUZZLE LAND – (Looping) – Sometimes…(actually lots of times)…I wish I could do just that. Anyhow, this is a variation of one of my other themes. https://soundimage.org/puzzle-music-4/ FUTURE FUNK – (Looping) – Here’s a grungy looping piece with a mechanical feel and a funky vibe that might sound cool in a sci-fi game of some kind. https://soundimage.org/dance-techno/ Enjoy!
  8. Virtual Reality (VR) environment and VR game development are both emerging as far as game development is concerned. Currently the gamers have ample choices with regard to variety of devices for interacting with VR. Throughout this post we will be discussing about popular VR platforms for game development so that you can experience the best in playing your favorite games. Some of the noteworthy platforms are: https://www.redappletech.com/what-are-the-suitable-platforms-for-vr-game-development/
  9. This is really not a good idea, but I have no other good way.
  10. Thank you, this is a drag connection, the original mouse enters the phone to determine whether to connect, but the pointerover mobile is invalid, I get the local coordinates through e.data.getLocalPosition when pointermove To judge whether to enter the phone, maybe this is not the best solution. Nice day
  11. Thank you @ivan.popelyshev! We used three different sized SVG's, created textures from base64. and changed them dynamically based on scale. And yes, we are tinting the sprites.
  12. bubamara

    Low fps particles

    Don't know why Firefox is so slow. But you could reduce number of particles shown/computed. Draw that texture to off-screen canvas, read pixels, check whether yours 2x2 particle is pure black and don't create it in that case
  13. Alain

    Low fps particles

    It has improved in Chrome, but in Firefox it's still the same.
  14. Last week
  15. That's exactly why a year ago we've added this awesome API into v5. Right now v5 is almost there, and you can experiment with v5-rc3. I really hope that you like that system because I made it exactly for cases like yours, it was VERY difficult to explain to everyone in the team and get an approval. People need access to textures, authors of PixiJS cant possibly know everything that user wants. This is how you get GLTexture: https://pixijs.io/examples/?v=v5.0.0-rc.2#/textures/gradient-resource.js if you call "baseTexture.update()" somewhere before the frame, it will notify TextureSystem that texture needs updating , and then when one of pixi renderers asks to bind that texture, it will call "TextureResource.upload" method. That's how it happens: https://github.com/pixijs/pixi.js/blob/dev/packages/core/src/textures/TextureSystem.js#L139 According to our main image resource, https://github.com/pixijs/pixi.js/blob/dev/packages/core/src/textures/resources/BaseImageResource.js#L64, you can track the state not only by dirtyId, but also by "glTexture.width/height" . Basically, if width and height are wrong you upload whole texture, otherwise you go for subImage. As for previous data, readPixels is tricky thing, its the only synchronous operation there. When I use it, I call it only after whole render(), only one time. I suggest to maintain your copy of teture independently from glTexture: in an array or in canvas in your TextureResource, that way you wont need to call readPixels(). SUMMARY: If glTexture width and height are wrong, upload whole array. Otherwise modify part of array you need, put that part into temporary array and call subImage. Dont forget to set width and height to correct values. and HAPPY DEBUGGING!
  16. Its better to use pure 2d context for that. Create a canvas, use `getImageData` . If you use it wiht pixi loader you can get canvas either in "texture.baseTexture.source" (v4) or in "texture.baseTexture.resource.source" (v5). Yes, PixiJS does not cover everything that 2d context does, its better to know how it works. I used context2d with pixi webgl many times : https://pixijs.io/examples/?v=v5.0.0-rc.2#/textures/gradient-resource.js Some people take images from loader, make bitmaps from them and use them for interaction P.S. You've missed, this thread is not related to your problem. It happens.
  17. Hello, My goal is to update a small part of a texture the fastest way possible with WebGL2, preferably using Pixi.js v5 (RC 3 is out). Am I right that a RenderTexture is going to re-upload the whole texture whenever there is a change? (this would not be good for a big texture, hence why I am looking for another method) I'm a complete noob when it comes to OpenGL, but I've googled a bit and figured that I can use gl.texSubImage2D() to upload just the part of the texture that I need to change. I didn't find a way to get the WebGLTexture object of a PIXI.Texture, so to be able to use that command I did something like this (not the complete code): renderer.addSystem(PIXI.systems.TextureSystem) renderer.TextureSystem.contextChange() // needed to do this loader.load(main) // and could not use gl.texSubImage2D() on tex before the loader called main function main() { let tex = resources['test'].texture let imgData = new Uint8Array(32*32*4) renderer.TextureSystem.bind(tex) renderer.gl.texSubImage2D(gl.TEXTURE_2D, 0, 0, 0, 32, 32, gl.RGBA, gl.UNSIGNED_BYTE, imgData) renderer.TextureSystem.unbind(tex) } But I wish that I had the WebGLTexture available so I could avoid messing around with PIXI.systems.TextureSystem, because I don't really know much about it or when and how it should be used. I also want to read the previous data and change it, I figured it can be done with: gl.readPixels(0, 0, 32, 32, gl.RGBA, gl.UNSIGNED_BYTE, imgData) But that needs the frameBuffer to be binded first... Hence I tried to also use the PIXI.systems.FramebufferSystem, lol: renderer.framebufferSystem.bind(fb) //fb = new PIXI.Framebuffer(tex.width, tex.height).addColorTexture(0,tex) gl.readPixels(0, 0, 32, 32, gl.RGBA, gl.UNSIGNED_BYTE, imgData) But it was not that easy, I didn't even find a way to unbind it. But I guess it is not supposed to be used for my little problem...? Maybe there should be some Pixi.js functions to do this? Maybe something similar to this: texture.getPixels(x, y, width, height, ArrayBuffer) texture.setPixels(x, y, width, height, ArrayBuffer) I'm new here btw, this is my first post I don't have much Pixi.js experience yet, but I really like it.
  18. Hello! I want to use png image as a height map for an isometric pixel game. I don't need to display it. I only need to load it and read pixel values in form of [r,g,b,a]. There are libs like png.js, which has png.getPixel(x,y). But I believe PIXI already has all I need for that. How can I do it? Instance of what class should I use? Or is there a way to convert a png image to a typed array? Or may be all this is a bad idea?
  19. You can use touchstart and touchend to track if user is holding down. Or pointerdown and pointerup.
  20. There is no such thing as pointerover for touch. It's the equivalent of mouseover, where you hover the cursor over an area but don't select it. Touch doesn't have that. Either you've pressed it or not.
  21. If you use projection for any kind of... projections , not just for ISO stuff, then I doubt it will work with canvas. otherwise just make "renderer.plugins['sprite2d'] = renderer.plugins['sprite'];"
  22. I'm totally new to pixijs and to game development in general. I need a help in fixing this error in devices that use canvas if webGL is not available. Im using projection plugin and it is seems like the error is from projection.sprite2d. I am researching about the issue and found PIXI.CanvasRenderer.registerPlugin but don't know how to use it. please help I'm stuck with this issue. TIA
  23. After a lot of googling I've fixed the problem with adding crossOrigin: true .add('tile_lumber', getImagePath('tile_lumber.svg'), { crossOrigin: true }) I have no idea what crossOrigin does or how it works but it seems to have solved the problem. I got the answer from If the problem occurs again, I'll post here.
  24. Please provide more information , my telepathy doesn't work on the words you wrote. @themoonrat is our pointer-master
  25. If you have too many canvases so that webgl context amount starts to break, you could use some canvases in 2d context. Also one thing that would need to be kept in mind is that only rerender the contexts that area actually visible / need rerendering, that way you can keep the performance hit at minimum. Custom application/render loop is something that you need in any case, as pointed out already by Ivan.
  1. Load more activity