Scaling KineticJS canvas with CocoonJS idtkscale

Question

I got my KineticJS game working inside CocoonJS quite nicely, except scaling the canvas. I have 1024x768 canvas, which is great for iPad 2. But for iPad 4, due to retina screen, the game takes only 1/4th of the screen.

CocoonJS says this about the scaling:

CocoonJS automatically scales your main canvas to fill the whole screen while you still 
continue working on your application coordinates. There are 3 different ways to specify how
the scaling should be done:

idtkScale
 'ScaleToFill' // Default
 'ScaleAspectFit'
 'ScaleAspectFill'

 canvas.style.cssText="idtkscale:SCALE_TYPE;"; // The SCALE_TYPE can be any of 
 the ones listed above.

I have tried this adding this:

layer.getCanvas()._canvas.style.cssText='idtkScale:ScaleAspectFit;';

But it is not working. Any idea how to get KineticJS created Canvases to scale in CocoonJS?

Hop

I'm not too familiar with CocoonJS, but when I built my game I just set the height and width of the stage to that of the window. Is this something possible to do for you? just by doing something like getStage().setHeight(document.innerHeight); ??? – Meliorism

This is a link to my game, cs.neiu.edu/~tsam/physics/index.phtml, you can view the source of the page to see the functionality (you can log in with test/test). – Meliorism

I'm not familiar with Cocoon, but maybe Cocoon change the width and height of your Kinetic Canvas and leave the scale intact. Try with the scale method of the Stage: Stage.scale({scalefactor, scalefactor}); – Magnificent

The link you provided to your game doesn't seem to be working... – Spoondrift

I wouldn't touch the cocoon JS Scaling. What I would do is try to match it using kinetic because kinetic will subsequently render your scenes/ characters etc. while cocoon just takes your <canvas> tag and scales it. It does no rendering – Bushwa

Can someone create easiest example to test on devices with itunes.apple.com/es/app/cocoonjs-by-ludei/id519623307?mt=8? – Superfluity

Did you try the other types? 'ScaleToFill' or 'ScaleAspectFill'? They seem to make more sense. – Denison

Answer 1

Okay, I found an answer to this question myself and since there are so many up votes, I want to share the solution.

The solution was to comment some code within KineticJS and then add the CocoonJS scaling to the canvas creation.

1. Comment these lines (not all at one place):

inside _resizeDOM:

this.content.style.width = width + PX;
this.content.style.height = height + PX;

inside setWidth of Canvas:

this._canvas.style.width = width + 'px';

inside setHeight of Canvas:

this._canvas.style.height = height + 'px';

1. Add this inside Canvas prototype init:

    this._canvas.style.idtkscale = "ScaleAspectFill";
   

This does the trick for me. Now what I do is I calculate the correct aspect ratio for the canvas and let CocoonJS scale it for me. Hope this is as useful for others as it has been for me!

Hop

Answer 2

When dealing with making a canvas object full screen if on mobile. In CocoonJS this feature is out of the box. So we patched the code to set

document.body.style.width

and

document.body.style.height

These are DOM related and not supported (nor needed on full screen mode). Also code related to canvas style and position was patched, since it isn’t needed.

For now on, the correct way of getting screen size is

window.innerWidth

and

window.innerHeight

To make your Canvas objects full screen, set

canvas.width= window.innerWidth; canvas.height= window.innerHeight

One thing you must know about CocoonJS is that you don’t have to change your canvas size to make it run fullscreen. CocoonJS will up/down scale your canvas and have correct touch coordinates sent. You could choose how you’d like your canvas to be scaled, either keeping aspect ratio or not, and also if you want to have no blurring filter applied to the scaling operation, which comes handy for games relying on pixel art. Refer to the official CocoonJS Wiki pages to know how to control scale operations.

REFERENCE

http://blog.ludei.com/cocoonjs-a-survival-guide/

Sanctus

While this link may answer the question, it is better to include the essential parts of the answer here and provide the link for reference. Link-only answers can become invalid if the linked page changes. – Wilds

Thank you, I will take this into account for next time. – Sanctus