demiculus

Refreshing page distorts textures

Recommended Posts

When it is the first time I open the game and play everything is fine 822587480_ScreenshotatNov1806-36-59.thumb.png.7d868bbfd7893f0537b6acbf833862e0.png

after a couple of moves, players get new turns, some cards fly around(players get resources, trade etc) and then when I hit page refresh to start a new game some of the cards are smaller: 

324941532_ScreenshotatNov1806-43-33.thumb.png.768d1543ab61fbbae4a7b4628521c813.png 

Note that this happens to only to cards. The thing that is common with all cards is that they animate. The cards animate when player receives a new resource. So maybe I thought some old code was continuing to run on the background even when the player refreshed the page, so I made sure all the old animations stopped when the player hit refresh. This didn't solve the problem.

Another thing that was interesting was, the cards on the left bottom and the cards in the bank are totally different sprites. They have nothing in common except for their texture (bank cards don't even animate). So I'm guessing the texture pack didn't load right specifically for the 2 types of cards shown in this image. Note that each game different cards are smaller, but once a certain texture is smaller 'ALL' of the sprites that use that texture becomes smaller. 

How can I fix this?

My loading function is as below
 

export function loadImages() {
        PIXI.loader
            .add("tile_lumber", "../images/tile_lumber.svg")
            .add("tile_brick", "../images/tile_brick.svg")
            .add("tile_wool", "../images/tile_wool.svg")
            .add("tile_grain", "../images/tile_grain.svg")
            .add("tile_ore", "../images/tile_ore.svg")
            .add("tile_desert", "../images/tile_desert.svg")
            .
            .
            .
            .on("progress", loadProgressHandler)
            .load(GameUICore.setup);

}

export function setup() {
        assetsLoaded = true
        createContainers()
        GameUICards.setCardProps() //The cards on left bottom created here
        GameUIActions.createActions()
        GameUIPlayers.createPlayers() //The cards in bank created here
        createTimer()
        createKeyboardActions()

        app.ticker.add(function (delta) {
            animateObjects()
        });
    }

function animateObjects() {
        for (let view of animatingViews) {
            view.animate()
        }
        for (let line of animatingLines) {
            line.animate()
        }
        for (let text of animatingTexts) {
            text.animate()
        }
        removeObjectsWhoseAnimationFinished()
    }

You can try to reproduce the problem: http://katan.io/

Share this post


Link to post
Share on other sites

It's interesting that the small cards aren't consistent. Why a few one are still big but why the others are small? 

 

The pattern I see at the bottom is, first and last is small. That pattern isn't present on the right side tho

Share this post


Link to post
Share on other sites

Sorry for my late reply, I had family issues. 

So the things I've figured out it 

`cmd + shift + r `-> doesn't resolve in such a problem

`cmd + r` -> resolves in such a problem

The problem is something to do with cache and I couldn't decipher how. 

I messed around with Cache-Control as well as other things but no luck

<meta http-equiv="cache-control" content="no-cache, no-store, must-revalidate, post-check=0, pre-check=0" />
<meta http-equiv="cache-control" content="max-age=0" />
<meta http-equiv="expires" content="0" />
<meta http-equiv="expires" content="Tue, 01 Jan 1980 1:00:00 GMT" />
<meta http-equiv="pragma" content="no-cache" />

I'm trying to turn `cmd + r` into `cmd + shift + r`. If it is possible this'll solve the problem. I'll post when I do.

 

 

Share this post


Link to post
Share on other sites
function getRandomString(): string {
    return '?' + String(Math.floor(Math.random() * 9999999999))
}

export function loadImages() {
    PIXI.loader
        .add("tile_lumber", "../images/tile_lumber.svg" + getRandomString())
        .add("tile_brick", "../images/tile_brick.svg" + getRandomString())
        .add("tile_wool", "../images/tile_wool.svg" + getRandomString())
        .add("tile_grain", "../images/tile_grain.svg" + getRandomString())
        .
        .
        .
        .on("progress", loadProgressHandler)
        .load(GameUICore.setup);
}

I've changed it like this and seems to be working. This is probably not the optimal solution but it works. 

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Recently Browsing   0 members

    No registered users viewing this page.