Pixel perfect?

I think that if you build for html5 games, it is mandatory...

How to implement it?

 

Take a look at my thread which relates to rendering quality. It may be related to your concerns.

 

This...



Pixels duplication when moving or rotating

 

Looks like you've got a solution already, but yeah - you'll need a camera that aligns the world texels onto screen space pixels. The solution for a pixel perfect follow cam that I knocked up is here:

Code (JavaScript):

1.  
2. /// <reference path="PlayerMovementSystem.ts"/>
3.  
4. namespace game {
5.  
6.     /** New System */
7.     @ut.executeAfter(game.PlayerMovementSystem)
8.     export class PlayerCameraSystem extends ut.ComponentSystem {
9.        
10.         OnUpdate():void {
11.             let dt = this.scheduler.deltaTime();
12.             let displayInfo = this.world.getConfigData(ut.Core2D.DisplayInfo);
13.  
14.             this.world.forEach([ut.Entity, PlayerCamera, ut.Core2D.Camera2D, ut.Core2D.TransformLocalPosition],
15.                 (entity, playerCam, camera, transform) => {
16.  
17.                 let playerTransform = this.world.getComponentData<ut.Core2D.TransformLocalPosition>(playerCam.Player, ut.Core2D.TransformLocalPosition);
18.                 transform.position = playerTransform.position;
19.  
20.                 let zoom = 4.0;
21.                 let pixelsPerUnit = 16.0;
22.                 let gridSize = 1.0 / pixelsPerUnit;
23.  
24.                 let pixelsWide = displayInfo.width / zoom;
25.                 let pixelsHigh = displayInfo.height / zoom;
26.                 let unitsWide = pixelsWide * gridSize;
27.                 let unitsHigh = pixelsHigh * gridSize;
28.  
29.                 let cornerWorldSpace = transform.position.sub(new Vector3(unitsWide * 0.5, unitsHigh * 0.5, 0.0));
30.                 let cornerPixels = cornerWorldSpace.multiplyScalar(pixelsPerUnit);
31.                 cornerPixels = cornerPixels.round();
32.                 cornerWorldSpace = cornerPixels.multiplyScalar(gridSize); // Now rounded to nearest pixel
33.                 let centerWorldSpace = cornerWorldSpace.add(new Vector3(unitsWide * 0.5, unitsHigh * 0.5, 0.0));
34.                 transform.position = centerWorldSpace;
35.  
36.  
37.                 let unitsY = (displayInfo.height * 0.5 * gridSize) / zoom;
38.                 if (camera.halfVerticalSize != unitsY)
39.                 {
40.                     camera.halfVerticalSize = unitsY;
41.                 }
42.             });
43.         }
44.     }
45. }
46.