@2x naming convention versus svn checkin
Posted: 17 May 2017, 17:41
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:
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.
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:
[/size]
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:
It looks like some part of the process is treating the '@' character as a delimiter and not part of the filename.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.
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');
}
}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' );
}
