Jump to content
GameMonetize.com © The leading broker of high quality cross-platform HTML5 games ×
SellAnyCode - HTML5 Game Devs Forum Advertisement CashGun - Earn Money Online FreeCash

Siddi

Members
 View Profile  See their activity

  • Posts

    18

  • Joined

  • Last visited

Recent Profile Visitors

The recent visitors block is disabled and is not being shown to other users.

Siddi's Achievements

Newbie

Newbie (1/14)

  • Conversation Starter Rare
  • One Month Later Rare
  • One Year In Rare
  • Week One Done

Recent Badges

4

Reputation

  1. Siddi started following How to use compressed textures in Pixi 6 or 7
  2. Siddi
    How can compressed textures, e.g. DDS images, be used with Pixi.js version 6 or 7? With Pixi.js version 4 and 5 I used the compressed-textures plugin and could use DDS files in my project. The plugin supports Pixi.js 4 and 5 and was probably (?) obsolete with Pixi.js version 6. This repository of the plugin has been archived by the owner on Feb 23, 2023. Unfortunately, I have not yet found a way to successfully display compressed-textures with Pixi.js version 6 or 7. Also, I can't find any instructions on how to do this. Has anyone already done this and can give me a little tip on how to do it?
  3.    Siddi reacted to a post in a topic: Compressed textures bleeding edges
  4.    Siddi reacted to a post in a topic: Compressed textures bleeding edges
  5. Siddi
    Cool, thank you very much. Works perfect!!
  6.    ivan.popelyshev reacted to a post in a topic: Compressed textures bleeding edges
  7. Siddi
    This is the whole application, just one html file plus two dds-files: dds-demo.zip
  8. Siddi
    If I do not use the compressed-texture-plugin, but only PixiJS version 5 and use png files instead of the dds files, the problem does not occur. <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1" /> <title>PixiJS v5 Compressed Textures Bleeding</title> <script src="https://cdn.jsdelivr.net/npm/pixi.js@5.2.0/dist/pixi.js"></script> </head> <body> <script> const app = new PIXI.Application({ width: 1024, height: 512 }) document.body.appendChild(app.view) new PIXI.Loader() .add('photo1', './1.png') .add('photo2', './2.png') .load((loaderInstance, resources) => { const texture1 = resources.photo1.texture const texture2 = resources.photo2.texture const sprite1 = new PIXI.Sprite(texture1) const sprite2 = new PIXI.Sprite(texture2) sprite1.width = sprite1.height = sprite2.width = sprite2.height = 512 sprite2.x = 512 app.stage.addChild(sprite1, sprite2) app.stage.scale.set(.8, .8) }) </script> </body> </html>
  9. Siddi
    Unfortunately both the global setting of WRAP_MODE and the setting of WRAP_MODE on a texture have no effect: <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1" /> <title>PixiJS v5 Compressed Textures Bleeding</title> <script src="https://cdn.jsdelivr.net/npm/pixi.js@5.2.0/dist/pixi.js"></script> <script src="https://cdn.jsdelivr.net/npm/pixi-compressed-textures@2.0.3/dist/pixi-compressed-textures.min.js"></script> </head> <body> <script> //PIXI.settings.SCALE_MODE = PIXI.SCALE_MODES.NEAREST PIXI.settings.WRAP_MODE = PIXI.WRAP_MODES.CLAMP const app = new PIXI.Application({ width: 1024, height: 512 }) document.body.appendChild(app.view) new PIXI.Loader() .add('photo1', './1.dds') .add('photo2', './2.dds') .load((loaderInstance, resources) => { const texture1 = resources.photo1.texture const texture2 = resources.photo2.texture texture1.baseTexture.wrapMode = PIXI.WRAP_MODES.CLAMP texture2.baseTexture.wrapMode = PIXI.WRAP_MODES.CLAMP const sprite1 = new PIXI.Sprite(texture1) const sprite2 = new PIXI.Sprite(texture2) sprite1.width = sprite1.height = sprite2.width = sprite2.height = 512 sprite2.x = 512 app.stage.addChild(sprite1, sprite2) app.stage.scale.set(.8, .8) }) </script> </body> </html>
  10.    ivan.popelyshev reacted to a post in a topic: Compressed textures bleeding edges
  11. Siddi
    Hi, I am using PixiJS version 5.2.0 with the compressed-textures plugin version 2.0.3: If two dds-images are placed directly next to each other in a container and the container is scaled, a thin strip appears between the two images: If the scale of the parent container is exactly 1, no stroke is visible. With PixiJS 4.8.8 and compressed-textures-plugin 1.1.8 it works correctly and no stroke is visible. When the PixiJS scale mode is set to nearest (PIXI.settings.SCALE_MODE = PIXI.SCALE_MODES.NEAREST) no stroke is visible (but the images becomes a little bit blurry). I suspect this is related to the interpolation constraint of the scale mode LINEAR, but I'm not sure if this is a PixiJS problem or a compressed-textures-plugin problem ... This is the complete code: <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1" /> <title>PixiJS v5 Compressed Textures Bleeding</title> <script src="https://cdn.jsdelivr.net/npm/pixi.js@5.2.0/dist/pixi.js"></script> <script src="https://cdn.jsdelivr.net/npm/pixi-compressed-textures@2.0.3/dist/pixi-compressed-textures.min.js"></script> </head> <body> <script> //PIXI.settings.SCALE_MODE = PIXI.SCALE_MODES.NEAREST const app = new PIXI.Application({ width: 1024, height: 512 }) document.body.appendChild(app.view) new PIXI.Loader() .add('photo1', './1.dds') .add('photo2', './2.dds') .load((loaderInstance, resources) => { const sprite1 = new PIXI.Sprite(resources.photo1.texture) const sprite2 = new PIXI.Sprite(resources.photo2.texture) sprite1.width = sprite1.height = sprite2.width = sprite2.height = 512 sprite2.x = 512 app.stage.addChild(sprite1, sprite2) app.stage.scale.set(.8, .8) }) </script> </body> </html> Has anyone a good idea? Siddi
  12.    Siddi reacted to a post in a topic: Change the style of line that is already drawn?
  13.    Siddi reacted to a post in a topic: Dispatch Events
  14. Siddi

    Dispatch Events

    Siddi replied to Siddi's topic in Pixi.js

    I assume that the interaction manager works, and want to test my own code. I found a solution for me. I fire standard JavaScript events (MouseEvent and PointerEvent) directly on the canvas element. The rest (triggering the events on a certain DisplayObject) then takes over pixi for me. It is easier than expected ?, thank you!
  15. Siddi

    Dispatch Events

    Siddi replied to Siddi's topic in Pixi.js

    OK, thank you!
  16. Siddi

    Dispatch Events

    Siddi replied to Siddi's topic in Pixi.js

    I've looked into the sources, but still don't know if it's best to use app.renderer.plugins.interaction.emit('pointerup', originalEvent) or app.renderer.plugins.interaction.onPointerUp(originalEvent) But I think both should work, or not?
  17. Siddi

    Dispatch Events

    Siddi posted a topic in Pixi.js

    Hi, I'd like to develop some automated UI tests for my PixiJS application (PixiJS 4.8.1). My test procedure should look something like this later: const test = new UITest() test.click({x: 100, y: 80}) test.drag({x: 100, y: 80}, {x: 120, y: 40}) test.dblClick({x: 200, y: 120}) etc. For this I have to trigger events. I know that the InteractionManager and DisplayObject inherit from EventEmitter. Which option is the best way to trigger events? 1. directly on the canvas element? const originalEvent = new MouseEvent('click', { bubbles: true, cancelable: true, ... }) app.view.dispatchEvent(originalEvent) 2. or via app.renderer.plugins.interaction.onPointerUp (originalEvent) for example? 3. or via app.renderer.plugins.interaction.emit(originalEvent) Unfortunately, I have not yet managed to trigger an event with these three ways ? What already worked was to call the emit method directly on a PIXI.DisplayObject, but I needed to create a PIXI.InteractionEvent object myself, which was quite expensive ... Thanks in advance! Siddi
  18.    Siddi reacted to a post in a topic: WebGL and GetImageData
  19.    ivan.popelyshev reacted to a post in a topic: Add raw WebGL texture to Pixi.js
  20. Siddi
    Thank you for your support!!
  21. Siddi
    So, is it best to call app.renderer.reset() ?
  22. Siddi
    I just found out, that if I add the line sprites.forEach(sprite => app.renderer.unbindTexture(sprite.texture)) before calling sprite._texture.baseTexture._glTextures[app.renderer.CONTEXT_UID].texture = tex.data it works, but I don't know why?
  23. Siddi
    It is called only once, just inside the fromSource-method: Texture.fromSource = function(gl, source, premultiplyAlpha) { var texture = new Texture(gl); texture.premultiplyAlpha = premultiplyAlpha || false; texture.upload(source); return texture; }; After this call, the third Sprite turns black...
  24. Siddi
    Thanks for your answer! Interesting new features in version 5. I can not wait for it to be released ;-) I tried to use PIXI.glCore.GLTexture.fromSource(). First, three sprites are loaded and added to the Stage: const loader = new PIXI.loaders.Loader() loader.add(`../../var/textures/tiles/20/301520/354150.png`) loader.add(`../../var/textures/tiles/20/301521/354150.png`) loader.add(`../../var/textures/tiles/20/301522/354150.png`) let x = 100 loader.load(function(loader, resources) { let sprites = [] for (let id in resources) { let sprite = new PIXI.Sprite(resources[id].texture) sprite.width = sprite.height = 100 sprite.x = x sprite.y = 100 x += 100 sprites.push(sprite) } app.stage.addChild(...sprites) setTimeout(function() { loadWebGlTexture() }, 1000) }) After one second, loadWebGlTexture() is called: function loadWebGlTexture() { const url = `../../var/textures/tiles/20/301436/354176.png` let image = new Image() image.addEventListener('load', function () { let texture = PIXI.glCore.GLTexture.fromSource(app.renderer.gl, image, false) }, false) image.addEventListener('error', function(error) { console.error(error) }, false) image.src = url } Inside this function, as soon as the line "PIXI.glCore.GLTexture.fromSource" is called, the last added Sprite turns black: I still don't know why the texture is automatically exchanged? Do you have any idea?
×
×
  • Create New...