@2x naming convention versus svn checkin

[shadowphiar]

Hi,

In my game I have created two different versions of some graphics files, depending on whether the device has high-DPI resolution or not. (This means that you can enjoy high resolution on devices which support it - iPads, retina Macs, phones - but not use the download bandwidth or performance of always having to downscale images in cases where they're not used).

For these files I am using the (fairly common) convention that the files have identical name appended with a "@2x" resolution specifier. For example, in my img/ directory I have files "pieces.png" and "pieces@2x.png". This is working reasonably well so far, with one exception that when I use the web control panel interface to perform a svn checkin I get warnings like this in the log:

HAL says: committing pontedeldiavolo...
HAL says: just a regular commit, Dave.
[...]
svn: warning: '/var/tournoi/games/pontedeldiavolo/img/pieces.png' is already under version control
svn: warning: '/var/tournoi/games/pontedeldiavolo/img/pieces' not found
HAL says: done.

It looks like some part of the process is treating the '@' character as a delimiter and not part of the filename.

Is that something which can easily be changed or should I just use a different name for the files? I'd prefer to keep using @2x convention if possible since a number of tools support that automatically in their workflows, but I guess changing it wouldn't be that big of an issue if I had to.

Some implementation detail if anyone wants/needs to do something similar:

The images can be selected using css media queries, such as the one below. The styles in the bottom block override the ones in the top block only if one of the stated conditions is true (they are generally equivalent but support different browsers/versions). background-size is the explicit size of your 1x image, and ensures the resulting layout size is the same.

Code: Select all

.bridge {
    position: absolute;
    background-image: url('img/pieces.png');
    background-size:575px 435px;
}

@media (-webkit-min-device-pixel-ratio: 2), (min-device-pixel-ratio: 2), (min-resolution: 192dpi)
{
    .bridge {
        background-image: url('img/pieces@2x.png');
    }
}

In order to get the the benefits of saving bandwidth, you also need to ensure that the unused images are not preloaded. (This is something that maybe could in future be automated because of the common naming convention.) For now this can be achieved by putting in the setup function of the main javascript:

Code: Select all

            var isRetina = "(-webkit-min-device-pixel-ratio: 2), (min-device-pixel-ratio: 2), (min-resolution: 192dpi)";
            if (window.matchMedia(isRetina).matches) {
                this.dontPreloadImage( 'pieces.png' );
            }
            else
            {
                this.dontPreloadImage( 'pieces@2x.png' );
            }

[/size]

[dj_himp]

Hi,

I think that besides the error on svn, your way to optimise the bandwidth will not work.
According to the doc : http://en.doc.boardgamearena.com/Game_a ... _directory , all images in the img folder are loaded, so both version of your assets will be loaded whatever device the user have.

Hope that helps

[Een]

It looks like some part of the process is treating the '@' character as a delimiter and not part of the filename.

Is that something which can easily be changed or should I just use a different name for the files? I'd prefer to keep using @2x convention if possible since a number of tools support that automatically in their workflows, but I guess changing it wouldn't be that big of an issue if I had to.

Hi,

I checked and both

Code: Select all

svn add /var/tournoi/games/pontedeldiavolo/img/*

and

Code: Select all

svn add /var/tournoi/games/pontedeldiavolo/img/bridges\@2x.png

fail with the same error, so unfortunately this is something directly linked to the svn client. Not sure what can be done except changing the naming convention...

[Een]

I found the reason (http://stackoverflow.com/questions/7574 ... file-names) and implemented a workaround -> fixed

[shadowphiar]

Hi,
I think that besides the error on svn, your way to optimise the bandwidth will not work.
According to the doc : http://en.doc.boardgamearena.com/Game_a ... _directory , all images in the img folder are loaded, so both version of your assets will be loaded whatever device the user have.

This is the reason for the code I mentioned which uses the this.dontPreloadImage function.

[shadowphiar]

I found the reason (http://stackoverflow.com/questions/7574 ... file-names) and implemented a workaround -> fixed

Thank you! I tried again and there were no errors this time.

[dj_himp]

Hi,
I think that besides the error on svn, your way to optimise the bandwidth will not work.
According to the doc : http://en.doc.boardgamearena.com/Game_a ... _directory , all images in the img folder are loaded, so both version of your assets will be loaded whatever device the user have.

This is the reason for the code I mentioned which uses the this.dontPreloadImage function.

I missed that part, sorry, I will keep this technique in mind for my own game.
Thanks