Volter9
defined('SURRENDER') or die(); // StarWars
- Регистрация
- 27.05.2012
- Сообщения
- 1 145
Привет Всем! Сегодня я хочу вам представить свой игровой движок:
Название Проекта: RacoonJS
Страница Проекта: RacoonJS
Описание: RacoonJS это игровой движок для HTML5 Canvas 2D позволяет вам с легкостью создавать различные объекты, обновлять их, менять их рендеринг, предоставляет простые техники для обнаружения столкновений и небольшой класс для работы с векторами.
Последняя версия: v1.2
Демы:Пример: Для того что бы начать работать с RacoonJS вам потребуется простой HTML5 шаблон:
Там где отмечено JS комментариями, вы можете начать писать JS код где вам более удобнее, в <head> или в <body>.
(Заметьте: я использую замыкания во второй метки, т.к. если игрок будет иметь доступ к консоли он может начать жульничать! )
Теперь нам надо создать главный игровой объект и инициализировать его:
У вас по идеи должен появится черный экран. Если хотите поменять цвет заливки это сделать можно так:
Объект Game "наследуется" от объекта GameObject и имеет все его свойства + собственные методы.
Давайте теперь нарисуем картинку в canvas'e, вам нужна сначала картинка, я возьму эту:
А теперь к коду:
Ну вот, наша картинка готова.
Давайте сделаем так что бы она крутилась? Ок:
Просто, верно?
А еще интереснее будет если она будет следовать за курсором мыши!
Код:
Ну вот и все. В следующий раз, я напишу как создавать "классы".
Название Проекта: RacoonJS
Страница Проекта: RacoonJS
Описание: RacoonJS это игровой движок для HTML5 Canvas 2D позволяет вам с легкостью создавать различные объекты, обновлять их, менять их рендеринг, предоставляет простые техники для обнаружения столкновений и небольшой класс для работы с векторами.
Последняя версия: v1.2
Демы:Пример: Для того что бы начать работать с RacoonJS вам потребуется простой HTML5 шаблон:
Код:
<!DOCTYPE html>
<html>
<head>
<title>Пример: RacoonJS</title>
<meta charset="UTF-8" />
<script src="racoon.js"></script>
<script type="text/javascript">
window.addEventListener("DOMContentLoaded",function () {
// Здесь
});
</script>
</head>
<body>
<canvas id="canvas"></canvas>
<script type="text/javascript">
(function () {
// Или здесь
})();
</script>
</body>
</html>
(Заметьте: я использую замыкания во второй метки, т.к. если игрок будет иметь доступ к консоли он может начать жульничать! )
Теперь нам надо создать главный игровой объект и инициализировать его:
Код:
(function () {
var Game = new RJ.Game(); // Создаем игру
Game.init({ // Функция инициализации
canvas: "canvas", // Здесь идет ID канваса
size: size(640,480), // Размер, функция size(w,h) создает объект -> {w: w, h: h}
rate: 60 // FPS
});
})();
Код:
// После .init
Game.pColor = "#f00";
Давайте теперь нарисуем картинку в canvas'e, вам нужна сначала картинка, я возьму эту:
А теперь к коду:
Код:
var image = new Image();
image.src = "./racoonjs.png"; // Путь к картинке
var Img = new RJ.Image({ // Картинка
name: "Image", // Имя
size: size(128,128), // Размер
pos: vec2(320,240), // Позиция - используейте функцию vec2(x,y) для задачи позиции
image: image, // Картинка
anchor: vec2(0.5,0.5) // Якорь - грубо говоря точка от которой применяются трансформации
});
Game.addChild(Img); // Добавить Img к Game
Давайте сделаем так что бы она крутилась? Ок:
Код:
var Img = new RJ.Image({
// ...
anchor: vec2(0.5,0.5),
update: function () {
this.angle += 0.005;
},
});
А еще интереснее будет если она будет следовать за курсором мыши!
Код:
Код:
var Img = new RJ.Image({
// ...
anchor: vec2(0.5,0.5),
enter: function () {
this.game.mouseHandler.addHandler(this);
},
exit: function () {
this.game.mouseHandler.removeHandler(this);
},
mouseHandler: function (state, cursor) {
if (state == "move") {
this.setPos(cursor);
}
},
// ...
});