Movement & Controls
Add to favorites
Use game controls to move an object in your scene
Play video
Game Controls
By using Game Controls, you can create interactive experiences where you can control characters by walking or flying around. It allows you to control your character's speed and acceleration, as well as its rotation. Take control of your character and navigate your scene using key inputs, joysticks, buttons, gravity, and collision detection.
In Spline, adding game controls is really easy. Select the object that will be your character, then add the game controls event. Enter Play mode to see the results. As you can see, the cat jumps really high and moves really fast. Now let's play with the properties.
Movement
In this section you can move or make your character fly, as well as adjust its position and rotation’s speed and delay. We are going to set the position speed to 200. When it comes to auto-orienting an isometric scene, we have to use a trick to get it to work. Rotate the object to ( -180, -45, -180 ), then group the layer underneath it and apply Rotation to ( 0, 180, 0 ).
- Walk: Character is affected by gravity
- Fly: Character is not affected by gravity
- Auto-orient: Character is facing the direction of the input (up, down, left, right)
- Pos.speed: Speed of the character
- Rot.speed: Speed of the rotation of the camera
- Pos.delay: Acceleration of the character
- Rot.delay: Acceleration of the rotation of the camera
Desktop Controls
With Desktop Controls, you can determine what keys will control your character and what each will do. RotateBy enables the camera’s rotation by mouse, keys or both. The keyboard keys can be assign a new key or an another function. On the right side, the icon is to reset the all changes. This is how you customize your controls to move the character.
- Rotate By: Enable camera rotation by mouse, keys or both
- Keyboard Keys: After selecting a key, you can either assign it to another key or change its action in the dropdown menu.
- Reset: Resets all changes
- Dropdown: You can move, rotate, jump or assign none to each buttons
Multiple Game Controls Events
There will only be one Game Controls event in your scene where desktop and mobile controls can be defined if you have multiple Game Controls events. The warning will appear every time you edit a new Game Controls event, notifying you that it is not the main Game Controls event.
It is always possible to change the controls from the main button by pressing the one below.
Touch Controls
You can customize your experience using Touch Controls on touch-based devices such as iPhone and iPad, and you can enable or disable this option.
- Rotate By: Drag the screen or use a joystick to rotate
- Joysticks & Buttons position: Position the joysticks and buttons for Move, Rotate, and Jump.
- Offset: Space between the control and the screen edge
- Button size: Size of the button
- Visibility: Selected button is shown or hidden
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
![course logo](http://images.ctfassets.net/ooa29xqb8tix/6LKKWLFkx6JrlMY2mWPocd/2513a06a163424ba900bcff844c2c3fb/play-logo.png?w=400&q=50?fm=jpg&q=50)
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](http://images.ctfassets.net/ooa29xqb8tix/1bYdUtniEAUH3jdqQd3Qc1/7cf21d20882bfe59f01d7bc74e81010d/react-logo.png?w=400&q=50?fm=jpg&q=50)
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](http://images.ctfassets.net/ooa29xqb8tix/4bWEQMRsA6PzjiHljsxryp/55d78d84da072e9c22caddbccd67396b/swift-logo.png?w=400&q=50?fm=jpg&q=50)
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](http://images.ctfassets.net/ooa29xqb8tix/628IYmTv4uib8slYz9iuok/3de9010de04ae92a23c94f9885746db2/swift-logo.png?w=400&q=50?fm=jpg&q=50)
Build Quick Apps with SwiftUI
Apply your Swift and SwiftUI knowledge by building real, quick and various applications from scratch
11 hrs
![course logo](http://images.ctfassets.net/ooa29xqb8tix/0cjyplK9nhXoHTHN3XfTr/0e1edc5106a4c99ca2de7eeaaa772603/ui-logo.png?w=400&q=50?fm=jpg&q=50)
CSS Handbook
A comprehensive series of tutorials that encompass styled-components, CSS, and all layout and UI developments
1 hrs
![course logo](http://images.ctfassets.net/ooa29xqb8tix/1bYdUtniEAUH3jdqQd3Qc1/7cf21d20882bfe59f01d7bc74e81010d/react-logo.png?w=400&q=50?fm=jpg&q=50)
Advanced React Hooks
Learn how to build a website with Typescript, Hooks, Contentful and Gatsby Cloud
5 hrs
![course logo](http://images.ctfassets.net/ooa29xqb8tix/4k80OoiAH74E4JWnzT7iHv/d8b989084c313064df5be11f940ea48b/unity-logo.png?w=400&q=50?fm=jpg&q=50)
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](http://images.ctfassets.net/ooa29xqb8tix/1YISP6mvD83Gao3lQdhWqi/8b36d37d05f77a894dd0b7d30f8e6753/js-logo.png?w=400&q=50?fm=jpg&q=50)
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](http://images.ctfassets.net/ooa29xqb8tix/4bWEQMRsA6PzjiHljsxryp/55d78d84da072e9c22caddbccd67396b/swift-logo.png?w=400&q=50?fm=jpg&q=50)
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](http://images.ctfassets.net/ooa29xqb8tix/4bWEQMRsA6PzjiHljsxryp/55d78d84da072e9c22caddbccd67396b/swift-logo.png?w=400&q=50?fm=jpg&q=50)
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