Как вы рисуете сложные, глубоко вложенные сцены на HTMLCanvas?

Question

Я игра в платформер, похожая на марио. Я рисую все на холсте.Есть телевизор, который вы можете пнуть.При рисовании чего-либо на экране телевизора я хочу нарисовать его так, как будто верхний левый угол экрана (0; 0), но сам телевизор всегда поворачивается и переводится.Проблема усугубляется, если есть еще более глубокие вложенные элементы.Есть ли рамки или что-то, что поможет?Как вы рисуете вложенные сцены?Или это что-то не подходит для HTML5?

Вы можете предложить превратить телевизор в отдельный холст, повернуть и перевести его с помощью HTML.Но это не сработает, если мне нужно поместить некоторые вещи в игру за телевизором, а некоторые - впереди.Если я не превращаю каждую сущность в отдельный холст.В этом случае будут сотни.Вероятно, это плохая идея, верно?

Я уже использую отдельный холст для фона, пользовательского интерфейса и т. Д. Но все еще есть довольно много объектов, которые могут появляться как сзади, так и перед телевизором.

Answer 1

Вы можете сделать это, используя преобразований .Например, если у вас есть функция draw(), которая рисует что-то на холсте, вы можете сделать что-то вроде этого

function draw(){
    //draw something on the canvas
}

ctx.translate(100,150);
ctx.rotate(Math.PI/4);
ctx.scale(0.5,0.5);
draw();

, и содержимое будет отображаться повернутым на 45 градусов, с отображением верхнего левого угла.в (100; 150), и в половине его нормального размера.Чтобы сбросить преобразование, просто позвоните

ctx.resetTranform();
draw();

и все снова будет нарисовано как обычно.Однако у этого есть обратная сторона;содержимое не обрезается, поэтому, если draw отображает что-то, что было бы иначе за кадром, оно будет отображаться за пределами области, в которой вы хотели бы находиться.