problem about resolution in retina screen?

[fishenal]

i made a html5 mobile game using pixi.js, the problem is the diaplay in mobile screen not very clear, seems like loss half pixels because retina screen? i am not deep understand about real pixel and display pixel~

first i wrote: image resolve not good, like loss half pixels.

var width = screen.width
var height = screen.height

var app = new PIXI.Application(width, height, {transparent : true})
document.getElementById('canvas').appendChild(app.view)

var board = new PIXI.Graphics()

var coin = new Sprite(TextureCache['back.png'])
// radius is a dynamic calculation value
coin.width = radius * 2
coin.height = radius * 2
// ...			
board.addChild(coin)

 

then i tried:

// if i set resolution: ratio, i need scale down the board, right? other wise too large on the screen
// but after i scale down, the display like before, loss half pixel, why?

var ratio = window.devicePixelRatio
var width = screen.width
var height = screen.height

var app = new PIXI.Application(width, height, {transparent : true 
, resolution: ratio
})
document.getElementById('canvas').appendChild(app.view)

var board = new PIXI.Graphics()

// if i set resolution: ratio, i need scale down the board, right? other wise too large on the screen
// but after i scale down, the display like before, loss half pixel, why?
board.scale.set(1/ratio)


var coin = new Sprite(TextureCache['back.png'])
// radius is a dynamic calculation value
coin.width = radius * 2
coin.height = radius * 2
// ...			
board.addChild(coin)

 

radius value base on screen.width and screen.height, it's the value , we can see on chrome devtool's head line, i think it's not the real render pixels.

so , i think i need something, render full pixels after retina screen solve, but i dont know how to set on pixi.js or canvas.

in html, i think i can make the full pixel picture, than set the width half of it, so on render it's clear, how to do on canvas?

 

if you can't understand my english, just read the code ^ _ ^

 

Can anyone help me ? thank you very much!

[ivan.popelyshev]

1) remove "board.scale.set"
2) add "autoResize:true" in app options

This is what it actually does: https://github.com/pixijs/pixi.js/blob/dev/src/core/renderers/SystemRenderer.js#L233

Imagine we have SCREEN (css, stage) coords and VIEW (canvas). 

VIEW = SCREEN multiplied by RATIO

Thus, you dont have to change stage scale at all. Please note that "renderer.screen.width" is screen width, not "renderer.width=renderer.view.width".

Use SCREEN size to position elements in stage, not VIEW.

Also, there's "app.screen" shortcut, so you can use "app.screen.width"