Jump to content

Artifacts on the phone and some old monitors


Artem_Mikheev13
 Share

Recommended Posts

Hello, this is the first time I am writing a question. I use a translator for this. Created a simple container with several internal graphics objects. Everything is fine on most monitors, but it's bad on older monitors and mobile devices. Artifacts appear. How to fix it?

Code for creating graphics:

if (element.inner_un > 0) {
            const heightUnit = heightContainer / element.inner_un
            element.customProps = {
                ...element.customProps,
                heightUnit: heightUnit
            }
            let lineCoordY = element.customProps.coordY
            for (let i = 0; i < element.inner_un; i++) {
                //creating graphics for the line
                const lineGraphics = new PIXI.Graphics();
                //Outline of the container
                lineGraphics.lineStyle(1, "#000000");
                //Drawing this container
                lineGraphics.drawRect(element.customProps.coordX, lineCoordY, widthContainer, 0);
                elementWardrobe.addChild(lineGraphics)
                lineCoordY += heightUnit
            }
            //drawing lines in units
            if (element.div_h > 1) {
                const div_hElement = heightUnit / element.div_h
                let lineCoordY = element.customProps.coordY
                for (let i = 0; i <= element.inner_un * element.div_h; i++) {
                    //creating graphics for the line
                    const lineGraphics = new PIXI.Graphics();
                    //Outline of the container
                    lineGraphics.lineStyle(1, "#000000");
                    //Drawing this container
                    lineGraphics.drawRect(element.customProps.coordX, lineCoordY, widthContainer, 0);
                    elementWardrobe.addChild(lineGraphics)
                    lineCoordY += div_hElement
                }
            }
        }

 

5GEVSBRtevk.jpg

Link to comment
Share on other sites

Might want to check your app's `antialias`, `autoDensity`, or `resolution` as a starter.

Presumably it's struggling to antialias on low-tier single density displays.

density.thumb.gif.967c0cc7c5a340af29c48101e7f7dd11.gif

Otherwise, might be an issue with scale modes which is probably unlikely.

You might also have some success increasing the thickness of the line from 1 to 2 - something thicker that does not require so much half pixel aliasing.

Edited by jasonsturges
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

  • Recently Browsing   0 members

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