Chapters (10)
- 0:00Intro
- 3:35Setup
- 16:40Loading assets
- 19:36How to use Tiled to draw maps
- 36:23Writing logic to display map
- 45:02Creating the player
- 52:13Writing logic to display boundaries
- 58:07Writing logic to display dialogue
- 1:16:28Spawning the player + player movement logic
- 1:26:33Writing logic for scaling the camera + animations + dialogue text
Show the creator's full description
Learn how to use Kaboom.js to create a 2d game that is actually a developer portfolio. This is a creative way to show off your skills.
Live demo: https://jslegenddev.github.io/portfolio/
Source code: https://github.com/JSLegendDev/2d-portfolio-kaboom
Map files (map.json + map.png): https://github.com/JSLegendDev/2d-portfolio-kaboom/tree/master/public
Spritesheet: https://github.com/JSLegendDev/2d-portfolio-kaboom/blob/master/public/spritesheet.png
Fonts: https://datagoblin.itch.io/monogram
Tiled software: https://mapeditor.org
Substack post explaining how to implement mobile controls : https://jslegenddev.substack.com/p/how-to-implement-player-controls
Course developed by @JSLegendDev
❤️ Try interactive JavaScript courses we love, right in your browser: https://scrimba.com/freeCodeCamp-JavaScript (Made possible by a grant from our friends at Scrimba)
⭐️ Contents ⭐️
⌨️ (0:00:00) Intro
⌨️ (0:03:35) Setup
⌨️ (0:16:40) Loading assets
⌨️ (0:19:36) How to use Tiled to draw maps
⌨️ (0:36:23) Writing logic to display map
⌨️ (0:45:02) Creating the player
⌨️ (0:52:13) Writing logic to display boundaries
⌨️ (0:58:07) Writing logic to display dialogue
⌨️ (1:16:28) Spawning the player + player movement logic
⌨️ (1:26:33) Writing logic for scaling the camera + animations + dialogue text
🎉 Thanks to our Champion and Sponsor supporters:
👾 davthecoder
👾 jedi-or-sith
👾 南宮千影
👾 Agustín Kussrow
👾 Nattira Maneerat
👾 Heather Wcislo
👾 Serhiy Kalinets
👾 Justin Hual
👾 Otis Morgan
👾 Oscar Rahnama
--
Learn to code for free and get a developer job: https://www.freecodecamp.org
Read hundreds of articles on programming: https://freecodecamp.org/news
Description and video by freeCodeCamp.org. This page is an independent companion view; the video is embedded from YouTube.