Game Development Log | Kawaii Browser Game, Catomo

Game Development, UX UI DesignConceptual Design

catomo-top

Catomo is a web browser game which was developed for uni assignment. Skillset includes: HTML5, JavaScript, Phaser 3 and Photoshop.

  1. Overview
  2. Competitor Analysis
  3. Conceptual Design
  4. Visual Design
  5. Implementation
  6. Critical Review

Catomo Demo

1. Overview

The aim for this projects was to develop relaxing yet addictive game which has friendly and cute UI which makes a player happy and relaxed.

The title of the game consists of two words which are “cat” and “tomo”; tomo means friend in Japanese. Catomo consists of basic elements of shooting game: hit target and gain scores. Instead of shooting enemies, Catomo requires to feed cats to become friend with them.

A player gains scores by feeding cats; when a player achieves target scores they unlock a cat which can be seen in ‘mayTomo’ scene. A player can move side to side and can through food. There are two types of food: onigiri and fish. A player gains 10 points by feeding a cat an onigiri and gains 40 points by feeding fish which randomly selected.

If a player feed a seagull, they lose scores. Data such as scores and collected cats is stored in a player’s local storage which can be cleared by selecting “new game” button.

2. Competitor Analysis

Image credit: Hit-Point Co Ltd (left) | Open My Game (center) | Zepni Ltd (right)

I listed three competitors that cultivated my game design and UI design. All three have different game concepts but have similar atmosphere: relaxing, cute, hassle free and cats. I briefly jot down pros and cons of each game.

Neko Atsume

Image credit: Hit-Point Co Ltd

Attract cats with food and then watch them romp with your toys! More than 40 varieties of cats—white and black, tabby and calico—might stop by. Rare cats are rumored to roam the neighborhood too, but you’ll need particular items to entice those elusive felines. Each visitor is logged in your Catbook. Become a master kitty collector and fill it up! You can even make albums of your cat photos, or save them to your device and use them as wallpaper!

Hit-Point Co Ltd

Pros

  • hand drawing borders and a type of font give warmth to the game
  • logging adorable images of cats motivates a player keep playing
  • it has consistency all way through
  • easy to learn and play the system

Cons

  • difficult/takes time to gain gifts (to attract cats)

Feed the Cat

Image credit: Open My Game

Feed the cat – is a colorful puzzle game with simple controls. The goal of each level – to feed the sweets of all kittens. Sweet gesture can move your finger across the screen, snacks will move through the cells vertically and horizontally in all directions. When the sweetness gets into a cat, he eats it and goes to sleep, becoming an obstacle. Avoid black holes – they suck sweets forever, and some cat will remain without food and will be sad as grumpy cat.

Open My Game

Pros

  • simple and easy to learn the system
  • cute UI design

Cons

  • selection of colours and contras need to improve

Cat Condo

03-cat-condo

Build your own cat condo and populate them with cute furry feline friends! Start with a small kitty. Then combine, mix and match your kittens to upgrade them to majestic cats. Discover and unlock many types of cats. Complete achievements and gain rewards. Watch your condo grow to a big tower which is filled with toys all over. Become a master kitty collector. Let’s find all the kawaii neko!

Zepni Ltd

Pros

  • simple and easy to learn the system
  • repetitive and addictive
  • cute UI

Cons

  • icons get difficult to press as number of cat increase

3. Conceptual Design

Draft ideas of the game

Screenmap

4. Visual Design

Asset Design

Player

I used a character 'Futa’ which I designed in 2015. I redesigned Futa into cuter look for this game to match it for the theme.

UI

I selected fat font and designed buttons with round corner to make them look cute. Colour palette consists of fresh colours but not to vivid.

Background

Background image fade into one after another as time goes by.

I set the location as Brighton beach, I designed some iconic landmarks such as Brighton pier and beach huts.

Storyboard

Entrance

A player can enter to game scene by pressing [ play ] button and exit by pressing [ end ] button. Once a player enter the game, they will see [ play new ] button on entrance scene.

My Cat

A player can look their collection of cats by pressing catomo icon. There won’t be any cat if they don’t unlock the cats.

User Guide

User guide was accessible from both entrance and game scene. A player will go back to the scene by pressing [ x close ] button where they enter to user guide.

Death penalty (excluded)

Originally, death penalty was fired when a player feed a seagull but was excluded from the game as it does not fit the game theme. A player loose scores instead of death penalty.

5. Implementation

I used Phaser 3 to develop the game. Phaser 3 is a JavaScript framework for game development. I lost (probably deleted?) a folder where I kept documentation and notes. So i don’t have much stuff to put up here.

6. Critical Review

Phaser 3 was recommended (but not a requirement) by the tutor but it was difficult to learn it as most of existing samples were designed for Phaser 2. Many elements were not compatible between 3 and 2. I managed to develop the game but not I could have done it better with vanilla JavaScript and CSS3. It was a good experience but I should have selected other frameworks such as vue.js or react as these frameworks are more likely to use after my graduation.

I believe the game was in a good working order with good standard of UI design. However, implementation can be improved for better ways. There is a bug on seagull which I couldn’t find the solution.

Problem with creating cats

Problem

I managed to produce cats by using for loop but couldn’t find the way to add asset such as position, image frame and velocity to them.

Solution

I had to create cats individually.

Problem with Seagull

Problem

Seagull disappears unexpectedly but not sure what was the trigger. It seemed

Things to improve

Display scores on cats

When a player successfully feed a cat, socore should be displayed on/near the cat. It should help a player what they recieve.

Enriching user guide

User guide was provided but it was for demonstration rather than real usability. It wasn’t fully developed and only selected information was available.

Posted by Aiko Ohakoda