Content Count

Joined

Last visited

About 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!

Hello everyone, I am new in game develop. I want to detect if two sprits are hit each other, collision detection . Is there any method in pixi.js can do that? My thought is finding edge (x,y) of one sprit and to compare the other (x,y),but I think that too complicated.Is there some simple way to do that? Thank you!