Статья - рефлексия на тему игр как обучения, а игра в ней - результат этой рефлексии. В статье так же расскажу наиболее простой способ написания игры (на HTML5), инструменты и современные подходы. Для разработки нужны минимум блокнот и браузер, никакого дополнительного ПО. Запускаться игра будет в HTML, на любом устройстве с браузером (вплоть до телевизора).
Статью написал в рамках подготовки к пятничному игровому джему (GMTK Game Jam 2023). Никогда в них не участвовал, решил проверить, что успею запилить хоть что-то за пару дней и по-рефлексировать на тему. Поболейте за меня или сами поучаствуйте. Написанная в статье игра - не для джема, а для статьи, ссылка в конце. Игра из джема уже готова, можно ознакомится тут.
Игра
Немного майевтики. Прежде чем начать, ответим на вопрос - зачем делать игру вообще? И что такое игра?
В игры играют не только люди, но и животные. В статье игры в которые играют животные приводятся примеры игр птиц, рыб и даже насекомых. Авторы: Lee Alan Dugatkin, степень доктора и профессора в биологии, Sarina M. Rodrigues нейробиолог из университета Беркли (входит в топ 5 лучших университетов мира). Следовательно, делаем вывод, что:
Игра - инстинктивный способ обучения, мы делаем игру для того, чтобы чему-то научить. Играть - интересно, первостепенная эмоция в любой игре - любопытство. Поэтому "пройденные" игры, изученные вдоль и поперек перестают интересовать. Если игрок "переобучен" - игра ничему не сможет научить и ему будет скучно. Если игрок "не до обучен" - у него может не быть тех навыков и знаний, которые требуются для игры. Крайние примеры: "Игры про Кузю" и "Dawrf Fortress".
Например, я "прошел" крестики-нолики. Х ставится в центре, второй Х - по диагонали. Для 0 - по диагонали, второй 0 - в ряд с двумя Х. Всего вариантов исхода менее 100, просчитать всю игру заранее можно даже в уме по алгоритму минимакса. Если оба игрока "прошли" игру - всегда будет ничья. Однако, если второй игрок не "прошел" игру, то первому может быть интересно побеждать. Но это уже социальная механика игры.
Если игроку не интересно чему-то учиться - нужно заинтересовать его механиками (mech; megʰ - мочь), т.е. "мощью" игры.
Хороший пример: игра 2048. Она учит степеням двойки, предсказывать свои действия, принимать стратегические решения, свайпать. Но игра использует механику вызова (challenge): "Набери 2048".
Игрок осознает и эмоционально реагирует на механики (re - обратно, *ag- гнать, двигать). Сама тема эмоций - огромна, но мы классифицируем их все на два типа. Позитивные - обучение прошло успешно, негативные - есть проблемы. Если игра не объясняет механики, то они называются скрытыми, на них игрок реагирует бессознательно. Например "Время койота".
Механики
Помимо обучения игры дополняют эстетическими, социальными и материальными механиками. Социальные вызывают эмоции чувства принадлежности, чувства признания; материальные - азарт и т.д. Чаще всего - механики берут уже из известных игр, которые себя зарекомендовали, т.к. это бесконечно проще, чем изобрести новую, успешную механику. Обычно, совокупность механик называют жанр игры. Например, жанр "квест" (quest - поиски). Как следует из названия - это механика поиска чего либо. Например, "Найди Вальдо".
Интерактивность (interaction, inter - посреди, act - действие) - это про события. Игра запустилась, прошло время, тык пальцем/мышкой в экран. На эти события есть реакции игры (re - обратно, act - действие). В контексте игрока, событием будет появление на экране двух прямоугольников, а его реакцией будет эмоция (emotion, e - наружу, moveo - двигаться). В зависимости от эмоции - действие, событие в контексте игры. Больше интерактивности - лучше раскрывается механика.
Геймдизайн
Но как чему-то научить? Исходя из теорий бихевиоризма - через позитивное и негативное подкрепление. Причем, позитивное - намного эффективнее негативного.
Допустим, мы хотим научить игрока нажимать на закрашенный прямоугольник на экране. Будем рассматривать два события: игрок успел нажать на прямоугольник, или - не успел. Если игрок успел - успокаиваем и удивляем, если нет - злим. Допустим, синий - безопасный и приятный цвет (спокойствие ?), красный - опасный и неприятный цвет (злость ?). игрок справился отлично - постараемся его удивить зеленым ?. И на добивочку фиолетовый ?.
Сама тема цвета и его применения - огромна. Например, в США есть розовые тюрьмы. Согласно исследованиям - человеческий глаз наиболее восприимчив к зелёному участку спектра. Красный - кровь, синий - небо. Но это уже из области знаний о графическом дизайне. Мало кто замечал, но у многих успешных компаний синий логотип. Я инженер, поэтому буду использовать палитру "Инженерная".
Механика
Согласно отчету Contentsquare 2021 Digital Experience Benchmark, среднее по больнице время просмотра одной страницы составляет 54 секунды.
Чтобы проверить, что игрок действительно научился - будем считать, сколько раз он попал. Чем больше попыток потребуется - тем большим упорством должен обладать игрок и зависит от заинтересованности игрока. Будем считать, что ожидаемый интерес к нашей игре 10% и игрок проведет в игре 5.4 секунды.
Считаем количество успехов (successes) и неудач (fails). Если игрок справился, т.е. достиг максимального успеха (wins) - игрок обучен. Если же игрок достиг максимального числа неудач (looses) мы поможем ему и подставим прямоугольник под указатель, чтобы у него точно получилось, и сбрасываем число неудач. Это нужно, чтобы улучшить понимание механики. Это оригинальная механика, поэтому я не знаю, как она себя поведет, тем интереснее.
Есть вероятность, что мы не смогли вызвать эмоцию - тогда и сама механика в целом не будет работать. Помним закон Мерфи. Обычно просто добавляют надпись, стрелки, вызывающей желание нажать элемент (кнопка) и т.д. Для того, чтобы закрепить обучение - добавим механику поощрения. Если игрок научился и количество успешных попыток достигло максимума (wins), мы наградим игрока зелёным.
Для более ярких эмоций - воспользуемся звуком. Для этого мы будем использовать простой онлайн секвенсор (https://onlinesequencer.net/), создадим по звуку на каждое нажатие, по аналогии с цветом.
Реализация
Создадим два файла: index.html и script.js. Названия файлов на английском, как и код игры. index.html будет использоваться для запуска игры (будет открываться в браузере). Файл представляет собой документ, в котором есть тело (body) и файлы скриптов (script). Пока мы будем использовать только файл script.js. Нужно добавить две строчки в файл html:
<body></body>
<script src="script.js"></script>Для начала, нужно настроить документ. Добавим заголовок страницы, холст, выровняем. Файл script.js хранит код игры на языке JavaScript. В первую очередь, нам нужно создать элемент холст (canvas), на котором мы будем рисовать игру. Затем, добавляем холст в тело документа (document).
Слово "контекст" означает ситуацию, в которой что-то происходит. Игра двухмерная, поэтому и рисовать мы будем в двумерном 2d контексте (context, 2D, Dimensional - измерение). Добавляем в script.js:
Подготовка страницы
const canvas = document.createElement('canvas') // Создали холст
const context = canvas.getContext('2d') // Получаем 2d контекст
document.body.appendChild(canvas) // Добавляем холст в тело документа
canvas.width = screen.width // Ширина холста по ширине экрана
canvas.height = screen.height // Высота холста по ширине экрана
//Это нужно, чтобы холст располагался в документе ровно
canvas.style.left = 0
canvas.style.top = 0
canvas.style.position = 'absolute'
//Если не во весь экран - скрываем скролл
document.body.style.overflow = 'hidden'
//Заголовок станицы
document.title = 'Game'Следующий этап - определить значения всех переменных в игре. Сколько побед, успехов требуется, пути к файлам звуков и т.д. Я предпочитаю разделять функции от данных, поэтому каждый блок игры поместим в отдельный JS объект. Описываются они в формате JSON.
Данные
//Конфигурация уровня
const level = {
score: 0,
//Среднее время игры
defaultTime: 5400,
//Цвет текста нового уровня
levelUpColor: '#ff00ff',
//Цвет текста очков цепочки
scoreColor: '#000000',
easy: {
//Количество очков до следующего уровня
scoreUp: 10,
currentPosition: 0,
min: [100, 100],
max: [400, 300],
step: [100, 100],
positions:[ [100,100], [100,200], [200,200], [300,200] ],
lastTime: null,
bestTime: null,
},
}
//Конфигурация базы
const base = {
// Положение и размер прямоугольника
x: level.easy.positions[0][0],
y: level.easy.positions[0][1],
width: 100,
height: 100,
// Положение и размер второго
x2: level.easy.positions[0][0],
y2: level.easy.positions[0][1],
width2: 10,
height2: 10,
//Заливка
strokeStyle:'#000000',
//Закраска
fillStyle:'#aaaaaa',
//Закраска при успехе
fillStyleSuccess:'#aaffaa',
fillStyleFail:'#aaaaaa',
}
//Конфигурация механики
const mechanic = {
//Цвет успокоения
successColor: '#0000ff',
//Цвет победы
winColor: '#00ff00',
//Цвет поражения
failColor: '#ff0000',
//Закраска экрана
eraserColor: '#ffffff20',
// Количество победных нажатий
wins: 3,
// Количество неудачных нажатий
looses: 3,
successes: 0,
fails: 0,
sizeStep: 20,
winner:false,
hits: 0,
success: false,
cursor: { x: 0, y: 0 },
size: 0,
overwinSizeStep: 10,
overwin: 0,
baseWidth: base.width,
baseHeight: base.height,
pointerShrink: 0.85,
}
//Пути к звукам
const audio = {
fail:'sfx/fail.mp3',
level:'sfx/level.mp3',
success: 'sfx/success.mp3',
win:'sfx/win.mp3',
loose:'sfx/loose.mp3',
score:'sfx/score.mp3'
}
Нарисуем на холсте два прямоугольника (rectangle, rect). Один черный (#000000), другой - серый (#aaaaaa). Цвета задаются в 16-ричным числом (hexidecimal; hex). Расстояния на холсте измеряются в пикселях (pixel; px), положение измеряется от верхнего левого угла, двумя значениями с названиями икс (x) и игрик (y). Соответственно, у прямоугольника есть положение на холсте (x,y), ширина и высота (width, height), цвет (color). Он может быть обведенным (stroke) или закрашенным (fill). О том, как использовать 2D контекст холста в WEB, а так же - полное руководство.
База
//Рисуем базу
function drawBase() {
context.strokeStyle = base.strokeStyle // Цвет обводки
context.fillStyle = base.fillStyle // Цвет заливки
context.fillRect(base.x, base.y, base.width, base.height) // закрашиваем
context.strokeRect(base.x2, base.y2, base.width2, base.height2) // обводим
}Для ощущения механики прогресса - будем закрашивать холст прозрачным белым цветом на каждое нажатие, из-за чего предыдущие попытки будут растворяться. Для отличника - будем закрашивать постоянно по времени. В среднем, в играх уровень интерактивности графики около 60 обновлений (кадров) в секунду (FPS, frames per secord). Для этого мы создадим событие по времени: каждые 1000/60, где 1000 - количество миллисекунд в секунде (милли-, milli-, одна тысячная), 60 - FPS. Т.е. каждые 16.66.. миллисекунд будет происходить закрашивание экрана прозрачным белым.
Заливка прозрачным
function fade(){
context.fillStyle = mechanic.eraserColor // Цвет заливки
context.fillRect(0, 0, canvas.width, canvas.height) // закрашиваем
//Базу и очки оставляем, т.к. не все поймут
showMaximumScore()
drawBase()
}Регистрируем событие нажатия на экран. Событием будет нажатие указателем (pointwerdown) на тело документа. Следствие события (символ ⇒) будет меняться в зависимости от того, куда игрок попал. У указателя тоже есть положение x и у, поэтому нам нужно проверить, что указатель (точка) находится внутри прямоугольника. Есть хорошая статья на эту тему, расписывать не буду. Если попал указателем в прямоугольник в x,y с шириной и высотой width и height - попытка успешная, мы подкрепляем синим. Если не попал - красным. При каждом нажатии нарисуем на экране прямоугольник попадания в точке указателя. При попадании - сбрасываем промахи и наоборот.
Цифр количества успехов (successes) и неудач (fails) игрок не видит. Чтобы игрок чувствовал прогресс (progress, pro - вперед, gradi - идти). но нужно ему дать об этом знать. Для этого будем увеличивать размер нарисованного попадания в зависимости от successes и fails подряд. Если игрок превысит количество ошибок - закрашиваем предыдущий прямоугольник красным и рисуем новый, под указателем. Если игрок справился с обучением - рисуем попадание зеленым.
Событие при клике
function onClick(e) {
fade()
base.x2 = e.x - base.width2 / 2
base.y2 = e.y - base.height2 / 2
mechanic.hits++
mechanic.cursor = getCursorPositionOnCanvas(canvas, e)
mechanic.success =
mechanic.cursor.x >= base.x && mechanic.cursor.y >= base.y
&& mechanic.cursor.x <= base.x + base.width
&& mechanic.cursor.y <= base.y + base.height
if(mechanic.success){
new Audio(audio.success).play()
mechanic.fails = 0
mechanic.successes++
if(mechanic.successes >= mechanic.wins){
new Audio(audio.win).play()
mechanic.overwin = 1 + mechanic.successes - mechanic.wins
mechanic.size = mechanic.size + mechanic.sizeStep
mechanic.fillStyle = mechanic.winColor
level.easy.currentPosition++
level.easy.currentPosition = level.easy.currentPosition % level.easy.positions.length
if(level.easy.currentPosition === 0){
mechanic.winner = true
if(level.easy.lastTime===null){
level.easy.lastTime = new Date()
}
else {
level.easy.bestTime = new Date() - level.easy.lastTime
}
}
base.fillStyle = base.fillStyleSuccess
drawBase()
const position = level.easy.positions[level.easy.currentPosition]
base.x = position[0]
base.y = position[1]
base.x2 = position[0] + base.width / 2 - base.width2 / 2
base.y2 = position[1] + base.height / 2 - base.height2 / 2
base.fillStyle = base.fillStyleFail
drawBase()
}
else{
mechanic.fillStyle = mechanic.successColor
mechanic.size = mechanic.successes / mechanic.wins * mechanic.sizeStep
}
}
else{
base.fillStyle = base.fillStyleFail
new Audio(audio.fail).play()
level.easy.currentPosition = 0
level.easy.lastTime = null
mechanic.fails++
mechanic.successes=0
if(mechanic.fails >= mechanic.looses){
new Audio(audio.loose).play()
mechanic.winner = false
mechanic.fails = 0
context.fillStyle = mechanic.failColor
context.fillRect(base.x, base.y, base.width, base.height)
base.x = mechanic.cursor.x - base.width /2
base.y = mechanic.cursor.y - base.width /2
drawBase()
}
if(mechanic.winner){
drawBase()
}
if(mechanic.overwin > 0){
mechanic.successes=mechanic.wins
mechanic.overwin = 0
mechanic.size = 0
context.fillStyle = mechanic.failColor
context.fillRect(base.x, base.y, base.width, base.height)
drawBase()
}
mechanic.size = mechanic.fails / mechanic.looses * mechanic.sizeStep
mechanic.fillStyle = mechanic.failColor
}
context.fillStyle = mechanic.fillStyle
context.fillRect(mechanic.cursor.x - mechanic.size/2, mechanic.cursor.y - mechanic.size/2, mechanic.size , mechanic.size)
if(level.easy.bestTime !== null){
showText(e)
}
}На этом базово обученного игрока уже можно протестировать, провести экзамен. Будем перемещать прямоугольник в новую точку, ожидая попадания с первой попытки. Повторим это несколько раз и в конце дадим оценку (score) за прожатую цепочку целей. Рассчитаем оценку как время, за которое игрок прожал все цели, чем быстрее - тем лучше. Если успешно - выведем оценку на экран.
Показать текст очков и победы
function showText(e) {
new Audio(audio.score).play()
const speed = level.defaultTime / level.easy.bestTime
const rating = 1 + Math.round(speed * 5)
const fontSize = (10 + 15 * speed)
context.font = fontSize + "px serif"
context.fillStyle = level.scoreColor
context.fillText('+' + rating + '!', e.x, e.y)
level.easy.bestTime = null
level.easy.lastTime = new Date()
if (rating > level.easy.scoreUp) {
new Audio(audio.level).play()
document.title = 'x' + level.easy.positions.length
context.fillStyle = level.levelUpColor
context.fillText('NEXT LEVEL!', e.x, e.y + fontSize)
const random = getRandom(mechanic.hits)
addLevelPosition(random)
}
}Если игрок сдал на отлично, т.е. оценка превышает пределы допустимого - добавляем еще одну цель в цепочку и начинаем тестирование заново, показываем эту механику выводом текста с оригинальным цветом. Далее - отличнику уже нечему учиться, лишь совершенствовать навык.
Добавляем новую позицию в цепочку для отличника
function addLevelPosition(random){
const lastPosition = level.easy.positions[level.easy.positions.length-1]
const directions = []
if(lastPosition[0]>level.easy.min[0]){ directions.push( [-1,0]) }
if(lastPosition[0]<level.easy.max[0]){ directions.push( [1,0]) }
if(lastPosition[1]>level.easy.min[1]){ directions.push( [0,-1]) }
if(lastPosition[1]<level.easy.max[1]){ directions.push( [0,1]) }
const directionId = Math.round(random * (directions.length-1))
const direction = directions[directionId]
const newX = lastPosition[0]+direction[0]*level.easy.step[0]
const newY = lastPosition[1]+direction[1]*level.easy.step[1]
const newPosition = [newX,newY]
level.easy.positions.push(newPosition)
}Детали
Это нужно, чтобы получить точку попадания на холсте, а не на всем документе. Ведь регистрируем мы событие нажатия по документу, а не холсту.
function getCursorPositionOnCanvas(canvas, evt) {
var rect = canvas.getBoundingClientRect()
return {
x: evt.clientX - rect.left,
y: evt.clientY - rect.top
}
}В качестве случайного значения (random) - я беру номер нажатия и рассчитываю от него косинус. Получается псевдослучайное (непредсказуемое) значение от -1 до 1, минус - убираем.
function getRandom(increment){
const random = Math.abs(Math.cos(increment))
return random
}В игре используется 3 типа событий: игрок запустил игру - рисуем базу. Игрок нажал на документ - обрабатываем нажатие. Запускаем 2 таймера, первый - закраска экрана для отличника (winner), и для геометрического уменьшения размера попадания со временем, чтобы он не становился слишком большим. Регистрируем событие нажатия на экран. Событием будет нажатие указателем (pointwerdown) на тело документа. Следствие события (символ ⇒) будет меняться в зависимости от того, куда игрок попал.
События
drawBase()
document.body.addEventListener('pointerdown', onClick)
setInterval(()=>{
if(mechanic.winner>0){
fade()
}
}, 1000/30)
setInterval(()=>{
mechanic.size *= mechanic.pointerShrink
},100)Полировка
После того, как механики готовы - можно приступать к "полировке" игры. Процесс разработки - бесконечен. Всегда есть что улучшить, появляются новые инструменты, новые возможности игровых систем, новые знания и навыки. Для создания и запуска игры из статьи - нужен только браузер и блокнот. Запустить можно в браузере, а это ПО есть в подавляющем числе пользовательских систем.
Однако, если есть желание и умение - даже игру с готовой механикой можно улучшить усилением эмоционального отклика (как в примере с добавлением звука). Это может быть как и графическое улучшение, так и звуковое. Можно усовершенствовать или добавить новые механики. Заменить прямоугольники на изображения, добавить фоновую музыку, добавить элементы управления и подсчета очков; мультиплеерное взаимодействие (multi - несколько, player - игрок), оптимизировать загрузку звуков и т.д. Один из успешных примеров кликера - OSU, немаловажной механикой в ней является музыкальный ритм, воздействие на чувства такта (tactus - прикосновение, толчок, удар), эмоция когда "музыка качает".
Помимо игрового, у игры может быть как графический дизайн, так и звуковой. Каждый из этих компонент игры можно улучшить, однако это требует определенных навыков в этой области. В каждой игре есть свои наиболее значимые части, сильные и слабые стороны. Проблемы и их решения. Как и причины, по которым в них будут играть. Игра - может быть предметом искусства, сочетающая в себе огромное множество других предметов искусств: живописи, музыки, песнь, поэзии и прозы, инженерного мастерства, кино и т.д. Так же, как и множество новых способов взаимодействия с чувствами игрока, например тактильные (вибромотор, лазерный пистолет, контроллер и т.д.) или пространственные (очки виртуальной реальности).
Сам процесс написания кода и код игры тоже можно улучшать. Поделюсь некоторыми на мой взгляд полезными в этом деле инструментами, которые я использовал во время написания статьи.
Редактор кода Visual Studio Code https://code.visualstudio.com/
Онлайн генератор музыки Online Sequencer https://onlinesequencer.net/
Стандартный 2D контекст сильно ограничен и не производителен, поэтому я не рекомендую использовать его в профессиональной разработке игр. С появлением WebGL - игры в браузере могут быть намного более производительными, а значит - более наворочены графически. Я его в статье не использовал, т.к. он довольно сложный. Однако, его можно использовать так:
const canvas = document.getElementById("myCanvas");
const gl = canvas.getContext("webgl");Есть две популярные библиотеки для работы в webgl, которые упрощают работу:
https://threejs.org/ для 3D
https://pixijs.com/ для 2D
Фидбэк
Обратный отклик необычайно важен в разработке игр. Это отдельная большая тема маркетинга, QA, самой разработки. Даже если фидбэк (feed - подавать, back - назад) - это мат наполовину, он может быть намного важнее, чем простое "Клевая игра, мне понравилось". Да, чувство признания - это механика игры жизни, но фидбэк в разработке не для этого.
В маркетинге в качестве фидбэка даже собирают действия пользователя. Когда игрок запустил игру, сколько уровней смог пройти, как быстро прошел до конца. Собрать статистику и на основе анализа этих данных - принимать важные решения, которые сделают игру многократно лучше.
Обратный отклик №1
На основе обратного отклика - игра впоследствии может еще неоднократно полироваться. Я дождался первого комментария от @Zara6502 и доработал статью и саму игру. Что я понял из обратной связи:
Прямоугольник для "отличника" слишком быстро пропадает. Поэтому сделал его перманентным.
Несколько одинаковых серых прямоугольников - была неоднозначность, стал закрашивать предыдущий зеленым при успехе.
Чтобы улучшить понимание механики прогресса - перманентно вывожу количество очков на экран.
Как я и написал выше - это процесс бесконечный. Важно, чтобы негативный фидбэк вызывал синее чувство, а не красное. Ведь наша жизнь - тоже своего рода игра. Фиксы по этому фидбэку внес в игру.
Обратный отклик №2
На мобильных устройствах всплыла проблема адаптивности. Элементы не помещаются в экран. Это решается адаптивным холстом с фиксированным расширением. Проблема предвидимая, решается тестированием.
Игроку не понятно, когда появляются новые "квадраты". Это происходит при +11 и выше очков. Механика скрытая, а должна быть явная, т.к. игрок не понимает условие награды.
Подсказали крутую и оригинальную идею по изменению механики. Вполне вероятно - попробую, но это уже совсем другая история ;)
QA
Где попробовать? Выложил на itch.io. Максимум набрал 8 очков.
