At most one email a week. Unfollow anytime with one click.
Transcript
The full narration of this video. The current sentence is highlighted while the video plays; click any sentence to jump there.
Show transcript
Introduction
In this series, we create a complete platformer game in Construct 3, directly in the browser and without writing any code. This is the game, Kiko runs and jumps over a grassy island, collecting coins, stepping on slimes, and reaching the finish flag. There is a score, lives, sound, main menu, and at the end of the series, we export it as an HTML5 game. The first episode prepares the project, layout, and layers. Hello, welcome to the Construct 3 tutorial series, making the adventure platformer game Kiko. Construct 3 runs in the browser, just open editor.construct.net. The free edition is sufficient for the entire series, with a limit of 25 events and 2 layers per layout, so we design our game efficiently and neatly.
Project ar
On the homepage, click New to create a new project. Name it the Kiko Adventure. We'll keep the preset as S The Landscape 16:9, which means the game screen size is 854 x 480 pixels. Click Create.
Getting to know the interface
This is the Construct 3 interface. On the left, there is the property bar to change the properties of the selected object. On the top right, the project bar contains layout, event sheet, objects, and sounds.
Getting to know ae
On the bottom right, the layers bar.
Getting to know the interface
The middle area is the layout view, where we arrange the level. The dashed line in the layout shows the visible screen area during gameplay.
Game Layout
A layout is one screen or level of the game. Select layout 1 in the new project, then in the properties change its name to game. Change its size to 2400 x 544, which is long enough for one scrollable level. Also rename Event Sheet 1 to event game. Now Layers.
Layer and sky color
Select layer 0 in the layers bar and rename it to game. Disable Transparent, then click Background Color and fill with sky color. Red 120, green 200, blue 245.
HUD Layer
Add a second layer for the score and lives display. Right-click Layer Game, select Insert Layer Above, and name it hood. Set parallax hood to 0x0 so it stays still on the screen even if the camera moves. After that, select the game layer again as the active layer.
Save and Preview
Save the project via the project menu, Save as, Save as single file. Select the project folder and save as a C3P file. Click Preview to run the layout. It's still a blank blue sky, And in the next episode, we'll add Kiko along with the Platform Behavior. Want to be able to make your own game without coding?
Kpo3ID — KPIZID KPo43ID Na
Cerdas Inovasi Digital offers courses on game development using Construct 3 and Unreal Engine.
KpOZID — KPI2ID— KP)4JID NP
Game development services for education and promotional games for schools or businesses, as well as selling the project files of this tutorial complete with assets. Want to master all of this series? From a blank project all the way to exporting the game to HTML5? All 10 episodes, complete with PDF step-by-step guides, are available for premium tutorial subscribers. Subscribe starting at Rp69.000 per month, save 28% with the 12-month package, or pay once Rp999.000 for lifetime access. Want just one class? Buy a single class with lifetime access. Subscribe now at the premium page cerdasinovasidigital.com.
Kpo3ID KPI 2ID KP34JID Nas)
Contact us via WhatsApp, or visit cerdasinovasidigital.com. Thank you for watching, see you in the next episode.
Ask the class material
Type a question or keyword; we find the part of this episode that explains it and jump the video there.
My notes
Notes are saved with the current video time and are only visible to you.
Questions & answers
Stuck on a step? Ask here; the instructor and other learners can answer.
No questions yet.
Your instructor
Cerdas Inovasi Digital Team
Software developers, BIM & 3D engineers, and AI practitioners
52 video classes1,276 episodes
We build software, BIM models, games and AI automations for clients every day, and turn that hands-on work into step-by-step classes: every step is shown on screen and comes with a PDF guide you can keep.
