Katamari Damacy Interactive Game Poster

Пошаговое руководство (для навигации нажимайте стрелки!):

1. Вы можете пойти налево на стартовом экране и войти в комнату, чтобы изменить цвет вашего шара (нажмите кнопку с нужным цветом).
2. После того, как вы выбрали цвет, идите вправо стартового экрана продолжайте движение вправо, чтобы собрать корову.
3. В лесной комнате вы можете щелкать по фруктам, чтобы они упали на пол.
4. Когда вы переходите в следующую комнату, любой фрукты на полу будут собраны.
5. После леса вы выходите в открытое поле, щелкните в любом месте, чтобы построить ракету.
6. Нажмите на ракету, чтобы запустить в космос.
7. Конец! (вы можете навести курсор на звезды, чтобы они вращались!)

Цели и процесс проектирования:

При создании этого интерактивного опыта моей главной целью было создать опыт, подобный Катамари, на основе старых игр моего детства (таких как Putt-Putt и Freddie Fish). Именно здесь возникла идея переключателя цвета и навигационных стрелок.

Для создания этой игры я использовал множество инструментов. Photoshop был моим основным способом рисования, и я изучил Adobe Animate, чтобы создавать анимацию, которая воспроизводится при переходе в новые комнаты. Раньше я никогда не занимался анимацией, но несколько уроков помогли мне достичь нужного результата. Я научился создавать несколько простых анимаций и застрял на этом. Затем я зашел в Twine, чтобы объединить все анимации и изображения. Раньше я использовал Twine, поэтому был с ним знаком. Однако на этот раз мне пришлось много трансформировать и позиционировать изображения, которыепопросил меня немного изучить CSS. Я также обнаружил, что мне не нравится использовать CSS. В Twine есть забавная штука: вы не можете видеть локальные изображения, пока не создадите всю игру. Поэтому каждый раз, когда я хотел изменить положение изображения, мне нужно было редактировать его в Twine, создавать игру, открывать игру в веб-браузере, переходить в комнату с изображением, отмечать, где оно было, и повторить. Чтобы расположить все правильно, особенно звезды в последней комнате, потребовалось много проб и ошибок. Говоря о звездах, потребовалось много времени, чтобы разобраться с CSS-кодом, обеспечивающим их работу. Сначала я попробовал написать временной цикл в Twine, используя (live:) и (mouseover:), но через несколько часов я сдался. Позже я написал CSS-класс и анимацию для звезд.