Создание браузерных игр на HTML5 Голосов: 1 Адрес блога: http://createhtml5games.blogspot.com/ Добавлен: 2012-04-21 06:28:27

Прорисовка - полный перевод справки

2012-02-23 10:11:00 (читать в оригинале)

Перевод английской справки по Tululoo Game Maker.
Статья о прорисовки в Tululoo Game Maker.
Также дополнения Космо Мизраил Горыныча.


Все последующие функции используются только в событии Draw.

Этими функциями мы прорисовываем простые фигуры на экран:

• draw_line(x1, y1, x2, y2) - рисует линию по двум точкам
• draw_rectangle(x1, y1, x2, y2) - рисует прямоугольник по двум противоположным углам
• draw_circle(x, y, radius, outline) - рисует круг с указанным радиусом от центра. Параметр 'outline' указывает, должен быть круг закрашен (0) или нет (1).
• draw_sprite(sprite, frame, x, y) - рисует указанный спрайт на указанных координатах.
• draw_sprite_ext(sprite, frame, x, y, xscale, yscale, direction, alpha) - расширенная версия предыдущей функции; позволяет изменять размер, угол наклона и прозрачность спрайта

Обратите внимание, что всё рисуется на том же слое, что и объект; в этом случае сам объект не прорисовывается.
Однако вы можете добавить в начало вашего кода эту строчку:

draw_sprite_ext(sprite_index, image_index, x, y, 1, 1, image_angle, image_alpha);

Следующие функции влияют на прорисовку вообще:

• draw_set_color(r, g, b) - меняет цвет на указанный, в формате RGB (0..255)
• draw_set_alpha(alpha) - делает следующую прорисовку полупрозрачной (0 - полностью прозрачный, 1 - непрозрачный)
• draw_set_linewidth(width) - указывает толщину линии для дальнейшей прорисовки

Если шрифт не указывался до прорисовки, то используется Arial размером 12.
Стандартный цвет - белый.

Итого, чтобы нарисовать полупрозрачный синий кваадрат, нам нужно:

• указать цвет
• указать полупрозрачность
• и только потом рисовать

Пример:

draw_set_color(100,100,255);

draw_set_alpha(0.5);

draw_rectangle(10,10,30,30);

Также есть функции прорисовки текста, но это уже следующая статья.

---

Объекты - полный перевод справки

2012-02-23 09:37:00 (читать в оригинале)

Статья о создании и уничтожении объектов в игре, изменение их параметров.
Полный перевод официальной справки.
Дополнения Космо Мизраил Горыныча.



Эти функции манипулируют объектами в игре:

• instance_create(x, y, object) - создаёт указанный объект в указанных координатах
• instance_number(object) - возвращает количество объектов указанного типа в комнате
• instance_list(object) - возвращает массив со всеми объектами указанного типа в комнате
• instance_destroy() - уничтожает тот объект, который эту функцию вызывает.
• move_towards_point(x, y, speed) - двигает объект навстречу указанному объекту (на один кадр)
• place_meeting(x, y, object) - возвращает, происходит ли столкновение с указанным объектом в указанных координатах. Полезно при поиске пути или свободного места для создания объекта.

Как же быть с уничтожением или манипулированием других объектов? Для них есть функция with. Вот пример кода для простой бомбы:

xx = x;

yy = y;

with (blocks){

   if (point_distance(x,y,xx,yy) < 100){

      instance_destroy();

   }

}
instance_destroy();

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

У каждого объекта есть свои "родные" переменные.
Эти влияют на движение:

• x - расположение по горизонтали
• y - расположение по вертикали
• xstart - начальное расположение по горизонтали
• ystart - начальное расположение по вертикали
• xprevious - расположение по горизонтали в предыдущем кадре
• yprevious - расположение по вертикали в предыдущем кадре
• direction - направление движения (изначально 0, т.е. вправо)
• speed - скорость движения

Следующие переменные влияют на внешний вид объектов:

• depth - глубина объекта (влияет на порядок прорисовки, не советуем применять!)
• visible - прорисовывать ли объект или нет. Также влияет на событие Draw.
• sprite_index - меняет спрайт вместе с маской столкновений
• image_index - текущий кадр анимации
• image_speed - скорость анимации (кадров в секунду)
• image_single - если переменная не равна -1, то анимация останавливается на указанном кадре
• image_angle - поворот спрайта
• image_alpha - прозрачность спрайта (0..1)

Следующие переменные неизменяемы. Точнее - изменяемы, но менять их мы не советуем!!!

• id - уникальный номер объекта
• other - используется в столкновениях; это объект, с которым сталкиваемся
• object_index - тип объекта, т.е. образец, от которого он создавался
• parent - возвращает тип объекта Parent

---

Взаимодействие пользователя на мобильных устройствах

2012-02-23 09:05:00 (читать в оригинале)

Перевод английской справки по Tululoo Game Maker.
 
Вы наверняка знаете, что HTML5 игры также работают и на мобильных устройствах, например, смартфонах.
Такие игры делаются в Tululoo Game Maker
Во время игры на тач-скрине все события мыши генерируются автоматически, выбирается средняя точка между всеми нажатыми.

Для создания кнопок клавиатуры на экране, вам помогут следующие функции...

• vkey_add(x, y, width, height, index) - добавляет кнопку на экран с указанными параметрами и возвращает её ID. Index - это заменитель кнопки на клавиатуре (например, vk_enter).

Через полученный ID можно изменять параметры виртуальной кнопки:

• left - левая граница кнопки
• top -верхняя граница кнопки
• right - правая граница кнопки
• bottom - нижняя граница кнопки
• key - заменитель кнопки, как index при создании.
• active - активна ли кнопка, т.е. можно ли её нажать.

---

Взаимодействие пользователя с игрой - полный перевод справки

2012-02-23 08:52:00 (читать в оригинале)

Перевод английской справки по Tululoo Game Maker.
Статья о взаимодействии пользователя с игрой в Tululoo Game Maker. 
+ обозначения кнопок (в оригинальной статье отсутствует!). 
+ добавки Космо Мизраил Горыныча


Следующие функции отслеживают нажатия клавиатуры:

• keyboard_check(key) - возвращает, зажата ли указанная кнопка (true или false)
• keyboard_check_pressed(key) - возвращает, нажали ли указанную кнопку
• keyboard_check_released(key) - возвращает, отпустили ли указанную кнопку

Следующие функции и переменные отслеживают положение мыши в окне игры:

• mouse_x -хранит координату мыши по горизонтали
• mouse_y - хранит координату мыши по вертикали
• mouse_check() - возвращает, зажата ли левая кнопка мыши (true или false)
• mouse_check_pressed() - возвращает, нажали ли левую кнопку мыши
• mouse_check_released() - возвращает, отпустили ли левую кнопку мыши

Начиная с версии 1.2.0, были включены переменные-альтернативы указанных выше переменных:

• key_down[key] - возвращает, зажата ли указанная кнопка (true или false)
• key_pressed[key] - возвращает, нажали ли указанную кнопку
• key_released[key] - возвращает, отпустили ли указанную кнопку
• mouse_down - возвращает, зажата ли левая кнопка мыши (true или false)
• mouse_pressed - возвращает, нажали ли левую кнопку мыши
• mouse_released - возвращает, отпустили ли левую кнопку мыши

Есть и другие функции управления мышью и клавиатурой:

• hide_mouse() - прячет стандартный указатель (только в игре)
• show_mouse() - вновь показывает стандартный указатель
• pause_game(key) - останавливает игру, пока не будет нажата указанная кнопка. Игра останавливается после всего события, поэтому ставить паузы между строками кода бессмысленно.

Список кнопок клавиатуры, которые мы указываем в функциях выше:

• vk_left 
• vk_right
• vk_up
• vk_down
   
• vk_enter
• vk_escape
• vk_space
• vk_shift
• vk_control
• vk_alt
• vk_backspace
• vk_tab
   
• vk_home
• vk_end
• vk_delete
• vk_insert
• vk_pageup
• vk_pagedown
• vk_pause
• vk_printscreen
• vk_f1 ... vk_f12
   
• vk_numpad0 ... vk_numpad9
• vk_multiply
• vk_divide
• vk_add
• vk_subtract
• vk_decimal

Нажатие букв мы проверяем следующими переменными:

• vk_a
• vk_b
• vk_c
• ...
• vk_z

Таким образом, мы можем написать простой код движения вашего игрока с помощью стрелок клавиатуры:

if (keyboard_check(vk_left))  x -= 4;
if (keyboard_check(vk_right)) x += 4;
if (keyboard_check(vk_up))    y -= 4;
if (keyboard_check(vk_down))  y += 4;

---

Вычисления - полный перевод справки

2012-02-23 08:26:00 (читать в оригинале)

Перевод английской справки по Tululoo Game Maker.
Статья о математических функциях в Tululoo Game Maker.

• choose(arg1, arg2, ..., argN) - Случайным образом возвращает один из написанных вами аргументов
• degtorad(degree) - Конвертирует градусы в радианы
• radtodeg(radian) - Конвертирует радианы в градусы
• abs(x) - Возвращает модуль числа x
• sign(x) - Возвращает знак от x (1 - положительный, 0, или -1 - отрицательный)
• min(arg1, arg2, ..., argN) - Возвращает наименьшее число из указанных
• max(arg1, arg2, ..., argN) - Возвращает наибольшее число из указанных
• random(value) - Возвращает дробное число от 0 до указанного (не включая указанного)
• irandom(value) -  Возвращает недробное число от 1 до указанного (включая указанный)
• point_direction(x1, y1, x2, y2) - определяет направление прямой по двум точкам
• point_distance(x1, y1, x2, y2) - определяет расстояние между двумя точками
• lengthdir_x(length, direction) - определяет х-координату вектора по углу и расстоянию.
• lengthdir_y(length, direction) - определяет у-координату вектора по углу и расстоянию.

Также можно использовать математические функции из JavaScript, его объекта Math:

• Math.abs(x) - Возвращает модуль числа x
• Math.min(arg1, arg2, ..., argN) - Возвращает наименьшее число из указанных
• Math.max(arg1, arg2, ..., argN) - Возвращает наибольшее число из указанных
• Math.random() - Возвращает случайное дробное число между 0 и 1.
• Math.round(x) - округляет число.
• Math.floor(x) - округляет число к ближайшему целому, которое меньше его
• Math.ceil(x) - округляет число к ближайшему целому, которое больше его
• Math.sqrt(x) - возвращает квадрат числа х.
• Math.pow(x, y) - возводит число х в степень у.
• Math.exp(x) - возвращает E степени х.
• Math.log(x) - Возвращает целый логарифм числа х.
• Math.sin(x) - возвращает синус угла х, указанного в радианах.
• Math.cos(x) - возвращает косинус угла х, указанного в радианах.
• Math.tan(x) - возвращает тангенс угла х, указанного в радианах.
• Math.acos(x) - возвращает арксинус угла х, указанного в радианах.
• Math.asin(x) - возвращает арккосинус угла х, указанного в радианах.
• Math.atan(x) - возвращает арктангенс угла х, указанного в радианах.
• Math.atan2(y, x) - возвращает арктангенс частного аргументов.