Scaling KineticJS canvas with CocoonJS idtkscale - javascript

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?

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/

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.
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';
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!

Related

Three.js slow on phone's vertical screen

I have this codepen that I made into a website. My problem is that it performs really slowly on the Chrome browser on my Nexus 5X phone, but when I rotate the screen to horizontal view or when I view the CodePen it runs smoothly again.
I've tried reversing the width and height to see if it was a screen / window height problem, and I've tried decreasing the height by a lot but it still is the same.
Will someone who is more experienced in webgl or three please explain this to me?
function init() {
scene = new THREE.Scene();
height = window.innerHeight;
width = window.innerWidth;
aspectRatio = width / height;
// ...
}
You may need to include some resizing logic in your render loop since the initial window size may change after loading (i.e. when rotated).. and if the window size changes but the renderer is not resized, then the renderer will be rendering to a nonintuitive framebuffer size and may cause problems when trying to scale the output to the actual display.
Edit:
I'm just throwing out guesses. :D And you make good points...
I do see that TODO line 36 Of your index.js.. which could cause problems.. Aside from that everything else in there looks legit to me.
Resizing logic can be tricky, because depending on CSS etc. setting the renderer size, can cause a pathological cascading resize since setting the renderer size, changes the camera size, which can cause a layout change.. and in some strange circumstances can cause small resizes to happen constantly.
Another way to check if this is the problem, is just make your renderer a fixed size square in your init... like 256x256 or something.. and comment out the window.resize listener.. .run that on your phone and see if performance stays consistent on rotations... fwiw, I think i see the issue on my Galaxy S5.. in horizontal mode its super liquid but vertical mode.. seems a little pokey.
Hey are you using PMREMGenerator at all in the code?
I've noticed that using this to generate environment maps really chuggs on the phones in portrait mode

FabricJS export relative to canvas

I'm building a authoring tool in FabricJS which is meant to export something for android devices. It's decided that I will support only 6/9 screen ratio (other screens will get black borders).
My problem is that I open the page on my pc, add and edit some elements and export ( using the fabricjs serializer ) and then I open on a laptop (different display size), the canvas gets resized correctly (with some js magic) but the elements are still at the same location and same size as on the big display
.
The problem is that FabricJS does not create elements relative to canvas size.
I can write my own export/load functions, but it feels wrong because each element has width, height, scaleX and scaleY. Using the handles changes the scale for some reason. This leads me to think that there is something like a canvas scale, but there is not.
Am I missing something? How does one go about exporting and then opening on a different screen, but maintaining the canvas ratio and having elements relative to the canvas size.

HTML 5 Canvas keep aspect ration

I am making a 2D game in HTML5 and Javascript. The target is a Windows 8 app. I want to code the canvas so that on every monitor the player can't see more or less of the game. I can't seem to get anything to work...
Any ideas?
Thanks!
You could make everthing scale with your ratio and window.innerWidth
or
you can check the display stats and make it work for 99% of the users.
w3schools browser statistics
w3schools innerWidth innerHeight

HTML5 Canvas using easeljs pan

Does anyone here have a good example of panning using Easeljs? I am actually animating a ball inside a large canvas, about 5200x7400. I am able to center the ball on the screen using a div that contains the canvas, setting it to overflow scroll and then using the function tick() to set the scrollTop and scrollLeft of my <div>.
I just want to do this using pure canvas because when I try to use my site on Android 4.0, scrollTop and ScrollLeft don't work.
Is there a reason you are using such a large canvas, instead of just moving the contents within the canvas? A big canvas like that will have quite a huge impact on memory and performance - whereas translating a Container inside the canvas is fairly insignificant.

HTML5 large canvas - moving and zooming whole content including background

My final is goal to implement a app like http://www.crystal.ch/abb/power_systems_landscape/ using html5.
As you see, we may need a large(2000*600) canvas, but im not sure.
Can anyone give me idea just for following behavior of above link ?
whole canvas content including background can move left-right smoothly using mousemove and mousedown operation
whole canvas content including background move left-right smoothly according to power system selection
Zoom in zoom out
Fade out effect like plus iconic circles
Any kind of idea would be appreciated.
basically you want something like this
<div id='wrapper' style='position: overflow: hidden; relative; width: 500px; height: 300px;>
<canvas id='canvas' width='2000' height='600'></canvas>
<div>
then when you want to scroll you would do something like
document.getElementById('wrapper').scrollTo(x, y);
and zooming would be
document.getElementById('canvas').style.width = 2000 * zoom;
document.getElementById('canvas').style.height = 600 * zoom;
You can play around with setInterval and what not to get the scrolling and zooming nice and smooth, but that's definitely be the fastest way to get those effect on a large canvas since there's no redrawing involved.
I recommend if you are working in 2D canvas js, that does not utilize zoom or move the canvas element, or any other html elements, you better write an algorithm within the draw function. Zoom is the death of quality and speed and can be complex from zoomin to zoomout (Don't forget all visible data on canvas is just a image).
I managed to upload a picture of 13000 px and multiplayer avatars to show all of an algorithm within the draw/update functions.
If you use 2 canvas you can crop from code big images and then composite to the visual map.
  If you have too much image width > 3000 ps must be divided by lower level (on iOS devices for image ~> 3000px comes to be negative scale - image comes smaller ).

Categories