Pokémon JavaScript Game Tutorial With p5.js

Published: 16 January 2024
on channel: JSLegendDev
5,949
233

For written tutorials, go to my substack : https://jslegenddev.substack.com/

Live demo : https://jslegend.itch.io/p5-pokemon-p...

Source code (Github repo) : https://github.com/JSLegendDev/Pokemo...

Assets (where you can download everything at once) : https://github.com/JSLegendDev/Pokemo...

Alternative link (where you need to download one by one) : https://github.com/JSLegendDev/Pokemo...

Software -

VSCode : https://code.visualstudio.com/

Tiled : https://www.mapeditor.org/

Download p5.js here : https://p5js.org/download/ (scroll down to find the download section for p5.min.js)

Chapters

0:00 Intro
1:44 Project Setup
2:19 Making the canvas responsive with CSS
6:40 Setting up p5
8:32 How to load fonts + Initializing canvas
12:18 Creating the menu scene
28:21 Creating the world scene
42:21 Writing the player code
1:08:36 Error in setAnimFrame
1:15:32 Implementing a camera
1:42:38 Fixing player movement
1:46:05 Drawing the world map in Tiled
2:04:17 Implementing the world map in the game
2:30:11 Creating hitboxes for the world (Collidables)
2:43:54 Implementing debug mode
3:10:25 Writing the code for the NPC
3:27:18 Implementing dialog system
3:48:51 Making screen blink when talking to NPC
4:00:22 Implementing Battle scene + system


Watch video Pokémon JavaScript Game Tutorial With p5.js online without registration, duration hours minute second in high quality. This video was added by user JSLegendDev 16 January 2024, don't forget to share it with your friends and acquaintances, it has been viewed on our site 5,949 once and liked it 233 people.