Я создал трехмерную игру в настольный теннис с использованием ванильного JavaScript и HTML5 Canvas за последние 2 недели моей стажировки в Leapfrog Technology.

Меня всегда восхищали техники 3D-рендеринга и их реализация на 2D-экранах. Я хотел узнать больше об этих методах, создав трехмерную среду с нуля и написав игровую логику, которая мыслит в трехмерном пространстве. Итак, я отправился в путешествие, чтобы изучать трехмерную графику, векторную математику и проекции трехмерной перспективы. К моему удивлению, это была легкая часть. У меня был опыт работы с Unity3D во время учебы в колледже, поэтому я точно знал, как нужно настроить среду и математику. Так что это мне очень помогло. Настоящая проблема возникла, когда нужно было сделать игру удобной (простой и интуитивно понятной). Жесткая математика и логика трехмерных игр не так уж помогли в улучшении пользовательского опыта (UX).

Именно тогда я осознал важность пользовательского опыта и игрового дизайна. Как программист, мы должны думать не только о технической ерунде, но и об опыте конечного пользователя, который доставит продукт. Скажем так, каким бы хорошим ни был продукт, от него не будет никакой пользы, если UX отталкивает конечных пользователей.

«Жесткая часть» трехмерных перспективных проекций и игровой логики была завершена в течение первой недели жизненного цикла проекта. Но когда я попросил нескольких друзей поиграть в игру, они с трудом в этом разобрались. Они постоянно пропускали мяч, их сбивали с толку движения биты и постоянно говорили мне, как сложно даже правильно подавать. После нескольких таких же комментариев я был уверен, что что-то нужно изменить.

Итак, я снова отправился в новое путешествие в Интернет, чтобы понять, что на самом деле делает игру интересной и простой. Именно тогда я обратился к одной из моих любимых реализаций настольного 3D-тенниса на мобильном устройстве - Virtual Table Tennis. Я вспомнил, как весело было играть в эту игру с друзьями. Мы никогда не жаловались на то, что игра запутана или сложна для обслуживания. Это было просто чистое веселье без фильтров.

Присмотревшись к игре более внимательно, я заметил несколько вещей, которые вообще не имели бы смысла по сравнению с реальной игрой в настольный теннис. В физику игры были внесены небольшие изменения, которые, мягко говоря, вызывали сомнения. Я подумал, что разработчики, должно быть, столкнулись с чем-то похожим на то, с чем столкнулся я. Это было откровением, я был слишком сосредоточен на том, чтобы сделать физику игры реалистичной. Я фактически использовал уравнения движений, чтобы определять движения мяча. Там я понял важность обзора литературы перед работой над проектом. Мы действительно можем многому научиться у людей, которые побывали там, где мы собираемся. Опыт действительно лучший учитель.

После всего этого я изменил физику игры, чтобы помочь игроку в игре, а не бросать ему вызов. Затем я добавил несколько визуальных подсказок, чтобы игрок знал, когда их летучая мышь коснулась мяча, а также звуковые подсказки и некоторые другие исправления с UI / UX. На этот раз, когда я попросил своих друзей поиграть в игру, было много положительных отзывов, они были очень довольны игрой.

Контроль:

На мобильном устройстве:

· Проведите пальцем по экрану, чтобы переместить летучую мышь, и проведите пальцем, чтобы отбить мяч.

On PC:

· Перемещайте мышь по экрану, чтобы переместить летучую мышь, и щелкайте мышью, чтобы ударить по мячу

Чтобы узнать все технические подробности, обязательно загляните в это репозиторий на github.

Обязательно попробуйте игру здесь.

Основные выводы

Я смог изучить все части, которые необходимо работать вместе, чтобы создать успешный и полезный продукт. Я также познакомился с профессиональной, но гостеприимной культурой здесь, в Leapfrog.

Наконец, я хотел бы поблагодарить моих коллег и моих исключительных наставников, которые помогали мне во время стажировки в Leapfrog.