Intro to Game Controls
Add to favorites
Use key inputs, joysticks, buttons, gravity, and collision detection to move your character through your scene
Play video
Meet Spline
This course is completely free thanks to Spline’s Sponsorship. Spline is a full-fledged 3D tool that is widely considered the Figma of 3D tools. It has everything you’d expect in a modern design tool: simple interface, real-time collaboration, a library of sample files and it works in the browser which means compatible with Mac, Windows and Tablets. It even has interactions and code export.
This Course
With this course, we will add states and events to animate the scene. Using these states, we will create nice interactions. Spline has integrated game controls that allow users to manipulate objects around a scene with collisions. We will fully animate the character. Spline recently released its Physics feature, which allows objects to be affected by gravity. We will learn about cameras and how to utilize them to view the scene from a different angle. It is also possible to create a night scene in Spline within a few minutes. There’s an integrated Sound library where you can use sounds and trigger them using event. The most impressive feature in Spline is probably how easy it is to export your work.
Next, we will re-create a beautiful web design from Figma to a React website. I will leave the public URL, the React demo link and the Figma design link in the description below.
Getting Started
In order to follow this course, you need to download the assets file which includes the template file. Here’s the link to download the template.
Download Spline
You can download Spline for Mac, Windows or Linux. You can also use it directly in the browser which is convenient on the go and on devices like the iPad.
Library
When you first start using Spline, you have access to tutorials and a number of high-quality files that you can open, inspect and edit. Many of these beautiful 3D assets are also taught from scratch in their YouTube channel.
Examples
Here are some examples of how you can make a website with Spline.
- https://threejs-journey.com/
- https://lol3p7.csb.app/
- https://2giomw.csb.app/
- https://plasma-wallet.com/
Conclusion
This is the end of the intro, I hope you are excited to build this awesome scene with me. I’ll see you on the next one.
Templates and source code
Download source files
Download the videos and assets to refer and learn offline without interuption.
Design template
Source code for all sections
Video files, ePub and subtitles
Subtitles
Videos
Assets
1
Intro to Game Controls
Use key inputs, joysticks, buttons, gravity, and collision detection to move your character through your scene
4:26
2
States, Events & Animations
Animate objects by using state-based animations
13:03
3
Movement & Controls
Use game controls to move an object in your scene
5:26
4
Collision Detection
Set a shape to your character to enable collisions
10:15
5
Physics
Make your object dynamic in a 3D environment
4:34
6
3D Camera & Lighting
Customize your camera to make your scene looks stunning
16:10
7
Audio & Sounds
Elevate your scene with beautiful sounds
6:32
8
URL & Embed
Export your 3D scene in web with no code
4:16
9
Export in React Site
Export your design in a React environment
29:31
10
Performance & 3D Vitals
Monitor and optimize your scene using 3D Vitals
4:28
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.
10 courses - 37 hours
Design and Prototype an App with Play
Build a completely functional prototype without writing a single line of code from your phone
3 hrs
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
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
Build Quick Apps with SwiftUI
Apply your Swift and SwiftUI knowledge by building real, quick and various applications from scratch
11 hrs
CSS Handbook
A comprehensive series of tutorials that encompass styled-components, CSS, and all layout and UI developments
1 hrs
Advanced React Hooks
Learn how to build a website with Typescript, Hooks, Contentful and Gatsby Cloud
5 hrs
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
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
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
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
