Jump to content
GameMonetize.com © The leading broker of high quality cross-platform HTML5 games ×

Compressed textures bleeding edges

Siddi

By Siddi,
in Pixi.js

 Share

Recommended Posts

Siddi Newbie

Siddi

Posted
Posted

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:

image.thumb.png.b6d4774c22bd773934a770c88a0fadc2.png

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/[email protected]/dist/pixi.js"></script>
        <script src="https://cdn.jsdelivr.net/npm/[email protected]/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

Link to comment
Share on other sites
Siddi Newbie

Siddi

Posted
  • Author
Posted (edited)

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/[email protected]/dist/pixi.js"></script>
        <script src="https://cdn.jsdelivr.net/npm/[email protected]/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>

 

Edited by Siddi
Link to comment
Share on other sites
Siddi Newbie

Siddi

Posted
  • Author
Posted

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.

image.thumb.png.1a27b95bbf7cad12384e7a7d1fafdec2.png 

<!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/[email protected]/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>

 

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
×
 Share
Go to topic listing

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...