KilledByAPixel / LittleJS

LittleJS is a fast HTML5 game engine with many features and no dependencies. 🚂 Choo-Choo!
MIT License
3.12k stars 158 forks source link

camera rotation #93

Open KilledByAPixel opened 1 month ago

KilledByAPixel commented 1 month ago

there should be a way to set the camera rotation angle.

ejamshidiasl commented 1 month ago

maybe fake it, add every thing to a game object and rotate, scale,... just that one.

import * as l from './littlejs.esm.js';

let fakeCam, obj;
const speed = 0.2;
const rotSpeed = 0.05;

function gameInit() {
  fakeCam = new l.EngineObject();
  obj = new l.EngineObject();
  fakeCam.addChild(obj, l.vec2(2));
}

function gameUpdate() {
  if (l.keyIsDown('KeyD')) fakeCam.pos.x -= speed;
  else if (l.keyIsDown('KeyA')) fakeCam.pos.x += speed;

  if (l.keyIsDown('KeyS')) fakeCam.pos.y += speed;
  else if (l.keyIsDown('KeyW')) fakeCam.pos.y -= speed;

  if (l.keyIsDown('KeyE')) fakeCam.angle += rotSpeed;
  else if (l.keyIsDown('KeyQ')) fakeCam.angle -= rotSpeed;
}

function gameUpdatePost() {
}

function gameRender() {
}

function gameRenderPost() {
}

l.engineInit(gameInit, gameUpdate, gameUpdatePost, gameRender, gameRenderPost);
KilledByAPixel commented 1 month ago

That's an interesting workaround but I was thinking we could support setting a camera angle natively in the engine.

This involves changing the webgl transformation matrix to include rotation as well the canvas 2d stuff. Also the functions screenToWorld, and worldToScreen will be updated.

KumaWang commented 2 weeks ago

That's an interesting workaround but I was thinking we could support setting a camera angle natively in the engine.这是一个有趣的解决方法,但我认为我们可以支持在引擎中本地设置相机角度。

This involves changing the webgl transformation matrix to include rotation as well the canvas 2d stuff. Also the functions screenToWorld, and worldToScreen will be updated.这涉及更改 webgl 变换矩阵以包括旋转以及画布 2d 内容。 screenToWorld 和 worldToScreen 函数也将更新。

i need it