MMNMTCO
Interactive Applications for Computer Media
Copyright © 2022 De La Salle - College of Saint Benilde. All rights reserved.
Objectives
● Kumustahan
● The PlayCanvas interface
● Basic controls
● Importing assets
● Lighting and skybox
● World units
● Activity 1
Copyright © 2022 De La Salle - College of Saint Benilde. All rights reserved.
Join our Discord channel
https://discord.gg/ekUceR6H6q
Please change your channel name to
your real first and last name.
Copyright © 2022 De La Salle - College of Saint Benilde. All rights reserved.
Kumustahan!
● How are you this week?
● Any questions about our topic?
Copyright © 2022 De La Salle - College of Saint Benilde. All rights reserved.
The PlayCanvas Interface
Copyright © 2022 De La Salle - College of Saint Benilde. All rights reserved.
The PlayCanvas Interface
ASSETS
Where all game
assets are uploaded
and organized.
Copyright © 2022 De La Salle - College of Saint Benilde. All rights reserved.
The PlayCanvas Interface
ASSETS
Where all game
assets are uploaded STORE
and organized.
A quick source of
third-party assets.
Copyright © 2022 De La Salle - College of Saint Benilde. All rights reserved.
The PlayCanvas Interface
VIEWPORT
Shows the current
scene being
rendered. In-scene
assets are called
entities.
ASSETS
Where all game
assets are uploaded STORE
and organized.
A quick source of
third-party assets.
Copyright © 2022 De La Salle - College of Saint Benilde. All rights reserved.
The PlayCanvas Interface
VIEWPORT
HIERARCHY Shows the current
scene being
A list view of all the rendered. In-scene
entities in the scene. assets are called
entities.
ASSETS
Where all game
assets are uploaded STORE
and organized.
A quick source of
third-party assets.
Copyright © 2022 De La Salle - College of Saint Benilde. All rights reserved.
The PlayCanvas Interface
VIEWPORT
HIERARCHY Shows the current
scene being
A list view of all the rendered. In-scene
entities in the scene. assets are called
entities.
INSPECTOR
Allows you to view
and adjust the
properties of an
ASSETS asset or entity
Where all game
assets are uploaded STORE
and organized
A quick source of
third-party assets
Copyright © 2022 De La Salle - College of Saint Benilde. All rights reserved.
The PlayCanvas Interface
Copyright © 2022 De La Salle - College of Saint Benilde. All rights reserved.
The PlayCanvas Interface
LAUNCH
Click this button to
run your game in
the browser
Copyright © 2022 De La Salle - College of Saint Benilde. All rights reserved.
The PlayCanvas Interface
LAUNCH
Click this button to
run your game in
the browser
MAXIMIZE
Toggle the visibility
of the side panels
Copyright © 2022 De La Salle - College of Saint Benilde. All rights reserved.
The PlayCanvas Interface
LAUNCH
CAMERA
Click this button to
Access preset run your game in
camera angles, the browser
toggle physics
object visibility
MAXIMIZE
Toggle the visibility
of the side panels
Copyright © 2022 De La Salle - College of Saint Benilde. All rights reserved.
Controls
Left Button + move Right Button + move Middle Button + move Middle Button wheel
Rotate camera around Swing camera around Pan camera without Zoom in and out.
the currently focused like in a first rotating it.
object. person-style view.
WASD keys Q key E key
Move camera forward, Move camera down Move camera up
back, left, right
Copyright © 2022 De La Salle - College of Saint Benilde. All rights reserved.
Controls
Translate
Rotate
Scale You can always refer to the controls
panel (the button is on the lower left) if
you forget any of the standard
hotkeys.
Copyright © 2022 De La Salle - College of Saint Benilde. All rights reserved.
Importing assets
You can add assets by importing them
from the PlayCanvas store, or by
uploading them.
● Visit the store by clicking on the store
button in the editor. Select a destination
project for your asset of choice and it will
be imported into that project.
● To import your own assets, drag them into
the assets panel from File Explorer. You can
also click on the + button beside assets and
choose Upload…
Copyright © 2022 De La Salle - College of Saint Benilde. All rights reserved.
Using textures and materials
Materials are assets can be applied to These textures are images that must
3D entities to add texture to them. be applied to the material assets.
Copyright © 2022 De La Salle - College of Saint Benilde. All rights reserved.
Lighting
Directional light Point light Spot light
Light that shines in one direction. Light that shines in all directions. Light that shines in one direction, from a
Everything in the scene is lit from this specific point, at a specific radius. This is
direction. In a reversal of the directional light, similar to how a flashlight would work.
rotation does not matter, only position.
Position does not matter, only rotation. For this light, both position and rotation
matter.
Copyright © 2022 De La Salle - College of Saint Benilde. All rights reserved.
Skybox
A skybox is composed
of six images mapped
onto a cube map.
Copyright © 2022 De La Salle - College of Saint Benilde. All rights reserved.
Skybox
After assigning the cubemap to the skybox under
Rendering (Settings > Rendering), the skybox will be
visible in the scene.
As you can see, higher resolution images work better!
Copyright © 2022 De La Salle - College of Saint Benilde. All rights reserved.
Skybox
You can download many premade skybox images at:
http://www.humus.name/index.php?page=Textures
You can also search for "skybox cubemap" online for
more options. You'll just need to edit the images to
separate each face.
Copyright © 2022 De La Salle - College of Saint Benilde. All rights reserved.
World units
Each square in PlayCanvas is
considered a 1x1 meter square.
Copyright © 2022 De La Salle - College of Saint Benilde. All rights reserved.
Activity 1
● Create a 3D environment that you will use
for your midterm FPS project
● Add lights and a skybox
● Experiment with props (tables, walls,
plants, etc)
● Take note of the 1GB storage limit
● Submission: submit the link to your
project from the dashboard (click on the
home icon if you're in the editor)
Copyright © 2022 De La Salle - College of Saint Benilde. All rights reserved.
