Canvas - манипуляции над канвасом игры (и прочее)

[YellowAfterlife]

Это расширение предоставляет набор функций для манипуляции над <canvas> игры и окном.

Размер и положение canvas'а
Как вы возможно знаете, размером канваса можно управлять через tu_canvas.width\height.
Но, у оного нет свойств x\y которыми можно было бы передвигать его по странице.
Следующие функции позволяют это делать:
canvas_set_position(x, y) - передвигает канвас по странице.
window_get_width() - возвращает общую ширину страницы.
window_get_height() - возвращает общую высоту страницы.
Пример:

Код:

canvas_set_position((window_get_width() - tu_canvas.width) / 2,
(window_get_height() - tu_canvas.height) / 2); // установит канвас посредине страницы

Стиль канваса
В некоторых случаях вам может понадобится менять стиль (style) канваса. Для этого есть функции:
canvas_set_style(key, value) - изменяет CSS свойство
canvas_get_style(key) - возвращает значение CSS свойства

Создание канвасов
canvas_create(width, height)
Эта функция создает новый элемент <canvas> указанного размера, который можно использовать как поверхность.
Пример:

Код:

var canv = canvas_create(64, 64);
var ctx = tu_context; // сохраняет предыдущую цель рисования
tu_context = canv.context; // переставляет цель рисования на новый канвас
// рисуем в него оранжевый круг:
draw_set_color(255, 191, 0);
draw_set_alpha(1);
draw_circle(32, 32, 24, false);
// сбрасываем цель рисования на оригинальную
tu_context = ctx;
// заменяем первый кадр спрайта на созданный канвас
spr_player.frames[0] = canv;

[agentx001]

Интересно. НО не совсем понятно зачем нужно:) Вы бы лучше Box2D прикрутили, как раз недавно обновление для JS версии вышло.

[YellowAfterlife]

Интересно. НО не совсем понятно зачем нужно:) Вы бы лучше Box2D прикрутили, как раз недавно обновление для JS версии вышло.

Центрирование игры посредине браузера, изменение размеров игры, прочее.
С помощью canvas_create можно вообще делать кеш векторной графики.

Про Box2D, это уже кем-то сделано - http://percsich.hu/tgmforum/index.php?topic=127.0

[vknw123]

Код:

canvas_set_position((window_get_width() - tu_canvas.width) / 2,
(window_get_height() - tu_canvas.height) / 2); // установит канвас посредине страницы

Скажите, куда этот код пропечатать?

[YellowAfterlife]

Код:

canvas_set_position((window_get_width() - tu_canvas.width) / 2,
(window_get_height() - tu_canvas.height) / 2); // установит канвас посредине страницы

Скажите, куда этот код пропечатать?

Данный код стоит вставлять в событие, перед которым размеры или положение канваса могли изменится - то есть начало комнаты или шаг, если вам нужно динамически перемещать канвас при смене размеров окна.