Jump to content

retina pixel density issue - I can't seem to select correctly from the spriteatlas


wizzard262
 Share

Recommended Posts

I have a very simple test page: http://battleofhoth.com/test.html  (below)
 

I select a single frame from an atlas (frames are 256px wide and 128px tall)
 

It works fine on all devices I've tried except iphone 4 & 5 (ios7)

where I get a 'frame' selected of 512px wide and 256px tall

 

I've looked for differences between my example and some correctly working examples, forum, docs, but I just can't seem to get it

Sorry probably a newbie oversight

 

Thanks

<html>	<head>		<script src="assets/phaser.min.js"></script>		<script>				var spriteAreas = {					'frames': [						{							'filename': 'redbox',							'frame': { 'x': 0, 'y': 0, 'w': 256, 'h': 128 }											// I expect to see a redbox ( just the top left frame of my atlas)				// on iphone 5 I see 512px wide  & 256px high (i.e. top 2 wide and 2 deep 'frames' of my sprite)						}					]				}				var game = new Phaser.Game(400, 400, Phaser.CANVAS, 'test', null, true, false);				var BasicGame = function (game) { };				BasicGame.Boot = function (game) { };				BasicGame.Boot.prototype =				{					preload: function () {													game.load.atlas('hothSprites', 'assets/images/hoth.png', null, spriteAreas);						game.canvas.getContext("2d").scale(window.devicePixelRatio, window.devicePixelRatio);					},					create: function () {						game.add.sprite(0, 0, 'hothSprites', 'redbox');											}				};				game.state.add('Boot', BasicGame.Boot);				game.state.start('Boot');		</script>			</head>	<body>		<div id="test" style="border: 0"></div>	</body ></html>
Link to comment
Share on other sites

 Share

  • Recently Browsing   0 members

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