keep silence
Участник
-
Автор темы
- #1
TinyJS - Маленький движок (или фреймворк, кому как угодно) для создания маленьких игр :)
TinyJS (далее просто "движок") создан для упрощения некоторых моментов при разработке игры для браузеров, а саму "иерархию" попытался взять из Unity.
Сама идея пришла в голову, когда я смотрел видосы по написанию змейки на чистом JavaScript'е.
Основы основ (ниже будут норм доки на английском)0. Настройка проекта
Прежде всего, нам нужно создать какой-никакой проект.
Для этого создадим файлик "index.html" и спастим туда след код:
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>tiny.js example</title>
</head>
<body>
<canvas id="canvas" width="256" height="256"></canvas>
<script src="scripts/tiny.js"></script>
<script src="scripts/main.js"></script>
</body>
</html>1. Сцена
Самый-самый главный класс в движке - это сцена (tiny.Scene).
Сцена занимается "вызовом" всех обьектов и функций, которые вы добавили в неё.
Добавляем сцену и заливаем её фон для контраста:
JavaScript:
var scene = new tiny.Scene({ canvasId: "canvas", disableSmoothing: true })
scene.background.fill("black")2. Обьект
Обьект, как и сцена, является классом.
Сам обьект состоит из тега и модулей.
Давайте создадим обьект с тегом курочка:
JavaScript:
var chickenObject = new tiny.Object({ tag: "chicken1" })
JavaScript:
scene.objects.add(chickenObject)3. Модули
Грубо говоря, вся наша игрушка состоит из модулей, поэтому без них - никак.
Какие модули есть у движка в стоке:
- Transform (отвечает за координаты и размер обьекта)
- Sprite (отвечает за отрисовку отдельных спрайтов или целый спрайтшитов)
Да, это всё... Пока что. Если кому-то будет не всё равно - я продолжу допиливать проект, дополняя его всякими новыми приколами.
Ладно, не будем о грустном! Время раскрыть вам секрет...
Обьект сам добавляет себе модуль Transform.
Если не указать явно параметры трансформа, то обьект создаст этот огрызочек:
JavaScript:
new tiny.Transform({ x: 0, y: 0, width: 0, height: 0 })
JavaScript:
var chickenObject = new tiny.Object(
{
tag: "chicken1",
transform: {
x: 48,
y: 48,
width: 48,
height: 48
},
modules: [
new tiny.Sprite({ path: "/assets/chicken.png" })
]
})A: А это ещё один секретный прикол =)
Всего есть 2 способа добавления модулей обьекту:
1. Тот, что я показал выше (запихать их в обьект)
2. Отдельно:
chickenObject.modules.add(new tiny.Sprite({ path: "/assets/chicken.png" }))Получить ссылку на модуль для дальнейшего взаимодействия можно след. образом:
JavaScript:
var chickenTransform = chickenObject.modules.get(new tiny.Transform)Пока что спрайтшиты рассматривать не будем. Может, завтра допишу. (ибо я хочу спать, честно)
Для отрисовки простой картинки нам достаточно добавить модуль Sprite (tiny.Sprite), в котором нужно указать path (пример выше) и всё.
После этих несложных манипуляций, на канвасе мы увидим курочку размером 48х48, размещенную по координатам х: 48, у: 48.
Q: Но я ничего не вижу!!! Что делать?!?!?!?
A: Для лицезрения наших трудов осталось совсем чуть-чуть!
4. Не знаю, как назвать :(
Пришло время запустить игровой цикл.
Делается это крайне просто:
JavaScript:
scene.begin(60)Вуаля! Если мы всё сделали правильно, то мы должны увидеть нашу курочку на канвасе.
Пришло время превратить курочку в мячик для пинг-понга! (Что?) На этом вводный курс и закончим.
В сцене есть такой прикол, как tick, и есть в нём функция add().
Вкратце: при помощи scene.tick.add() мы можем добавить функцию, которая будет выполняться каждый кадр ещё до отрисовки остальных обьектов.
При помощи этой штуки мы заставим курочку двигаться!
JavaScript:
var directions = {
left: false,
up: false
}
scene.tick.add(() => {
// check
if (chickenTransform.x <= 0) {
directions.left = false
} else if (chickenTransform.x >= tiny.canvas.width - chickenTransform.width) {
directions.left = true
}
if (chickenTransform.y <= 0) {
directions.up = true
} else if (chickenTransform.y >= tiny.canvas.height - chickenTransform.height) {
directions.up = false
}
// move
chickenTransform.translate.x(directions.left ? -1 : 1)
chickenTransform.translate.y(directions.up ? 1 : -1)
})A: Спокуха!
Что здесь происходит? Всё просто:
1. Создаём обьект, в котором будем задавать направление курочке
2. При помощи scene.tick.add() добавляем анонимную функцию
3. В функции проверяем, касается ли курочка границ канваса. Если да - инвертируем направление полёта.
4. Двигаем курочку при помощи transform.translate.x/y.
Всё! =)
Вот что у нас должно было получиться:
Пожалуйста, авторизуйтесь для просмотра ссылки.
На этом всё. Дальше идут полные, но коротенькие доки на английском:
JavaScript:
/*
** Scene class.
**
** USAGE:
** - Creating scene: var scene = new tiny.Scene({ canvasId: "canvas", disableSmoothing: true })
** - Filling background with black: scene.background.fill("black")
** - Setting background image (image will be stretched): scene.background.fill("/path/to/image")
** - Adding Object to scene: scene.objects.add(gameObject)
** - Removing Object: scene.objects.remove("ourObjectTag")
** - Adding callback function (called once per frame): scene.tick.add(() => {}) !YOU WON'T BE ABLE TO REMOVE IT!
** - Beginning game loop: scene.begin(60) // where 60 is our max FPS
** - Ending game loop: scene.end()
*/
/*
** Object class.
**
** USAGE:
** - Default: var gameObject = new tiny.Object({ tag: "chicken1", modules: [ * modules here * ]}) // modules are optional
** - With customized transform by default: var gameObject = new tiny.Object({ tag: "chicken1", transform: { x: n, y: n, width: n, height: n }})
** - Adding module: <Object>.modules.add(* module here *)
** - Getting module pointer: <Object>.modules.get(* base module object here *)
*/
/*
** MODULE: Transform
** DESCRIPTION: Used for positioning and sizing objects. Used in Object by default.
**
** USAGE:
** - Default: new tiny.Transform({ x: n, y: n, width: n, height: n })
** - Moving object (n is for x, y): <Transform>.translate.n(step)
*/
/*
** MODULE: Sprite
** DESCRIPTION: Allows you to render sprites and spritesheets
**
** USAGE:
** - Single sprite: new tiny.Sprite({ path: "/assets/chicken.png" })
** - SpriteSheet: new tiny.Sprite({ path: "/assets/chicken.png", cell: { width: n, height: n }, pointer: { row: n, column: n } })
**
** Object "cell" describes cell size, "pointer" - which cell we want to render
*/Сам движок находится в прикрепленном архиве в папке "scripts" под названием "tiny.js".
Всем спасибо за внимание.
UPD.: Немножко дополню пост. Вдруг кому это будет интересно - могу написать (или записать) тутор по созданию условного арканоида или пинг-понга. Дайте знать.
UPD.2: Да, много чего нужно написать самому для создания полноценной игрушки. Но для этого я и создал эту тему, чтобы получить наводку на дальнейшее развитие проекта.
Последнее редактирование:
