Forums » Help » Choppy Movement when not using scale

When using Ejecta the scale function is causing long loading times and some strange loading effects on a real iDevice. The first solution was not to use scale but the screen canvas .style property to stretch the canvas over the whole screen.

The loading times are fast again but this introduces very choppy movement even tough the game runs at a stable 60fps. I tried the methods from this old thread but it does not seem to fix the problem.

camera movement in the player.js

this.parent(); //parent before camera movement as suggested in the old thread

ig.game.screen.x = this.pos.x.round() - ig.system.width / 2; ig.game.screen.y = this.pos.y.round() - ig.system.height / 2;

main.js using canvas.style => results in choppy movement but is loading quickly

var width = 256;
var height = 192;

var canvas = ig.$('#canvas');
canvas.style.width = width*3 + 'px'; 
canvas.style.height = height*3 + 'px';

ig.System.scaleMode = ig.System.SCALE.CRISP; 
ig.main('#canvas', MyGame, 60, width, height, 1);

main.js using stretch => results in smooth movement but is loading very slowly

var width = 256;
var height = 192;
ig.System.scaleMode = ig.System.SCALE.CRISP;
ig.main('#canvas', MyGame, 60, width, height, 3);

Why are you rounding this.pos.x and y? That may be costing you some precision which could possibly cause some choppiness...

It was suggested in the above mentioned thread.
I removed the round() argument and the problem persists.

I have uploaded a video. Please download the file and ignore the dropbox preview.

https://www.dropbox.com/s/qk4eq0cauus77mz/impactjs_1a.mp4?dl=1

Now that I see your video, and what you're doing, it kind of makes sense.

You're telling your game to run with a scale of 1, meaning the canvas is 3 times smaller than usual. And then your canvas is being scaled/stretched to occupy the same amount of space as before. So when you move "1 pixel", it looks like you're moving "3 pixels".

Before, Impact was doing a nice trick that makes use of every pixel, despite being a smaller game scaled up. See the documentation for ig.System.DRAW.SMOOTH here for a better explanation.

What can you do about this? I'm really not sure. You could bump the scale back up and let Impact scale all your graphics; that would fix it. However, that can kill load times.

I wonder if anyone else has some insight here?

Having thought about it a little bit more, I think those are really the only two options:

1) Let Impact scale your graphics (which can add significantly to load times).

Or:

2) Let CSS scale up your game, but have choppier movement due to having fewer pixels available to interpolate across the same amount of physical distance.

Edit: Actually, you could try subpixel (ig.System.DRAW.SUBPIXEL) and it may allow you to make use of the space between scaled up pixels...

Going back to the documentation I found this:

if( window.ejecta ) {
    // Figure out the scaling ratio of internal to hardware pixels
    var hwpx = (window.innerWidth / ig.system.width) * ig.ua.pixelRatio;

    ig.system.getDrawPos = function( p ) {
        // Snap draw positions to the closest hardware pixel
        return Math.round(p * hwpx) / hwpx;
    };
}

It seems to be working on my device. Scrolling is smooth and loading is fast again.
I will update this thread if I encounter any other problems but for now everything works fine.

Nice! I guess it pays to read the documentation. Haha..