search

city41 / breakouts

A collection of JS engine implementations of Breakout
http://jsbreakouts.mattgreer.dev
542 stars 117 forks source link

CutJS/P2.js/Howler.js #53

Closed shakiba closed 10 years ago

city41 commented 10 years ago

Thanks Shakiba,

It works well overall, but I did find some issues. It's scaled down to half the size on a retina display. The levels are upside down. And on a phone, the game is off in the corner of the screen.

I took a stab at fixing these, but I wasn't 100% sure the best fix. For the upside down levels could iterate over the arrays in the opposite direction, but that seems hokey :)

How does Cutjs position items? I see the canvas fills the entire screen. What does the p2s variable do?

shakiba commented 10 years ago

Thanks for merge. I'm preparing another pull request.

p2s was a debugging variable, removed it and replaced it with ppu (pixel per physics engine unit) wherever still needed.

If it doesn't show correctly it has crashed somewhere, if possible please check browser errors. It should and generally does work on mobile devices.

It is possible to pass a canvas element or canvas id as second argument to loader, otherwise a full page canvas is created and used.

I have used a new concept called pinning for CutJS positioning, it is inspired by css styling (however it is not cascading), please see cutjs.org for details. In this game, game element are attached to p2.js bodies and then displayed by cutjs-p2 viewer.

CutJS is best used with high-res graphics and provides a viewbox method (it's like SVG viewbox) to scale up/down to available viewport and transparently takes devicePixelRatio into account. But as this game uses pixel graphics I have not used viewbox and therefore devicePixelRatio should be used manually which I forgot to do!