Get 50% off during WWDC 2025!

Design+Code logo

Quick links

Suggested search

Collision Detection image 1

Collision

You will see a yellow outline around your object when you zoom in. You can use this to define the boundaries of your character with the selected shape. In game controls, you'll enable the collision option right underneath the touch controls. The collider is the boundaries of your character, we will use the capsule since our cat is not completely round. Set the Size radius to 37 and the height to 94. Depending on the shape of your character, the collider's position and rotation will vary. The collider can be shown or hidden with this helper. Gravity is the force applied to your character. If it is positive, the object will float. As we saw earlier, the character was jumping really high, so we will divide this value by half. Using reset Y position, the character's position can be reset when it goes outside its bounds. Set it to -200.

Collision Detection image 2

Here’s a list of the properties:

  • Collider: Define the boundaries of your character with a selected shape
  • Size: Size of the collider
  • Position: Position of the collider
  • Rotation: Rotation of the collider
  • Gravity: Force applied to your character
  • Jump: Jump force of your character
  • Reset Y Position: Out of bound reset

Animate the Cat

After that, we'll animate the cat. There are multiple body parts on a cat, including the tail, the whiskers, the arms, the ears, the body, the nose, the eyes, and the feet. All of these layers will be animated.

Tail

Add a state, set the position Y to -23.8 and set the rotation to ( -180, 0, 170 ) with a Start event. Set the Cycle, Rewind and Repeat to Yes. If the tail doesn’t animate properly, remove it from the body.

Whiskers

Add a state to the Hair left and set the Rotation Z to -10. Add a Start event and set Cycle, Rewind and Repeat to Yes. Add a state for Hair right and set the Rotation Z to -185. Add a Start event and set Cycle, Rewind and Repeat to Yes.

Arms

Add a state to the Left arm and set the Rotation to ( 88, -52, -11 ). Add a Start event and set Cycle, Rewind and Repeat to Yes. Add a state for Right arm and set the Rotation to ( 88, 52, 11 ). Add a Start event and set Cycle, Rewind and Repeat to Yes.

Ears

Add a state to the Left ear, set the position Y to 1.35 and set the Rotation Y to -4. Add a Start event and set Cycle, Rewind and Repeat to Yes. Add a state for Right ear, set the position Y to -1 and set the Rotation Y to 4. Add a Start event and set Cycle, Rewind and Repeat to Yes.

Body

Add a state, set the position Z to -1.98 with a Start event. Set the Cycle, Rewind and Repeat to Yes.

Nose

Add a state, set the position Y to 14.88 with a Start event. Set the Cycle, Rewind and Repeat to Yes.

Eyes

Add a state, set the Scale Z to 0.07 and the Rotation X to 70.78 with a Start event. Set the Cycle, Rewind and Repeat to Yes, the duration to 0.5s, Delay to 1.5s and Delay repeat to Start.

Feet

Add a state to the Foot 1, set the position Z to 10. Add a state to the Foot 2, set the position Z to -20.

Key Down

For the feet, we are going to use the key down event because we want to run the animation when the WASD key is pressed. For each foot, add 4 Key down events, where you set WASD as the Key and only set Cycle and Rewind to Yes.

BACK TO

Movement & Controls

READ NEXT

Physics

Templates and source code

Download source files

Download the videos and assets to refer and learn offline without interuption.

check

Design template

check

Source code for all sections

check

Video files, ePub and subtitles

Subtitles

Videos

Assets

Meet the instructor

We all try to be consistent with our way of teaching step-by-step, providing source files and prioritizing design in our courses.

Willie Yam

Front-end/UI developer at Design+Code

I do UI coding. HTML/CSS/JS/SWIFTUI dev.

icon

10 courses - 37 hours

course logo

Design and Prototype an App with Play

Build a completely functional prototype without writing a single line of code from your phone

3 hrs

course logo

Create a 3D site with game controls in Spline

Build an interactive 3D scene implemented on a ReactJS site using Figma and Spline

2 hrs

course logo

Build a Movie Booking App in SwiftUI

Learn how to create an iOS app based on a beautiful UI design from Figma with interesting animations and interactions, create a custom tab bar and use navigation views to build a whole flow

1 hrs

course logo

Build Quick Apps with SwiftUI

Apply your Swift and SwiftUI knowledge by building real, quick and various applications from scratch

11 hrs

course logo

CSS Handbook

A comprehensive series of tutorials that encompass styled-components, CSS, and all layout and UI developments

1 hrs

course logo

Advanced React Hooks

Learn how to build a website with Typescript, Hooks, Contentful and Gatsby Cloud

5 hrs

course logo

Unity for Designers

If you want to make a game and don't know where to start, you are in the right place. I will teach you how to use Unity, code in C# and share essential tips and tricks to make your first game.

5 hrs

course logo

Create a Javascript Game

Learn how to create a web game using Phaser 3, a popular javascript game engine. Draw a map using an editor, implement the player, make the player move, apply physics, collisions, and implement the enemies.

2 hrs

course logo

Build an ARKit 2 App

Introduction to ARKit and learn how to make your own playground. You will be able to add models or even your own designs into the app and play with them

4 hrs

course logo

Create a SpriteKit Game

Overview of SpriteKit a powerful 2D sprite-based framework for games development from Apple and learn how to create your very own platform

3 hrs