Pixel Art RPG Maker with JavaScript
Vložit
- čas přidán 4. 07. 2024
- Armored knight, sneaky vampire or a battle princess? Who is the hero of your pixel art game going to be. Let's just create all of them and we can decide later. This class is for beginners, basic understanding of JavaScript is recommended to get the maximum value.
Related classes:
Pixel Art Tilemaps for beginners: • Make Pixel Art Games: ...
2D Camera in Pixel art games: • Pixel Art Game Develop...
Recommended video (advanced code):
Build a Game with JavaScript and HTML Canvas [RPG Kit series] • Build a Game with Java...
🍄 Download Project Art assets 🍄
Background layer: www.frankslaboratory.co.uk/do...
Foreground layer: www.frankslaboratory.co.uk/do...
Hero: www.frankslaboratory.co.uk/do...
Today we will learn:
- How to make 100s of different pixel art characters, generate a sprite sheet for them and animate them in a game world
- How to create a more robust but still beginner friendly code that can serve as a base for multiple different game types
- How to implement multi-layered grid-based game world
- How to implement smooth grid-based movement for the hero character
Sprite sheet maker, create 100s of UNIQUE HERO sprite sheets, for example:
Wood collector: sanderfrenken.github.io/Unive...
Waraxe Frankenstein: sanderfrenken.github.io/Unive...
Battle Princess sanderfrenken.github.io/Unive...
... SHARE YOUR UNIQUE CHARACTER in the comments if you want (59:48). CZcams spam filter will remove comments with links, so just share the second part of the URL after "#?":
"#?body=Body_color_olive&head=Orc_male_olive&legs=Pants_black"
I can then add the first part of the URL myself on my end:
"sanderfrenken.github.io/Universal-LPC-Spritesheet-Character-Generator/"
Check out these awesome pixel art games that utilize the same techniques we are learning about today:
Roots of Pacha: • Roots of Pacha - Relea...
20 Minutes Till Dawn: • 20 Minutes Till Dawn -...
Graveyard Keeper: • Graveyard Keeper Launc...
Unsighted : • Unsighted - Launch Tra...
Travellers Rest: • Travellers Rest Traile...
Chained Echoes: • Chained Echoes - Trail...
🎨 Toolkit 🎨
Vanilla JavaScript for everything as always, no frameworks and no libraries. Visual Studio Code editor + Live server extension recommended.
00:00 Get creative with pixel art characters
10:23 How to set up a local live server in Visual Studio Code
13:40 How to actually structure your game objects
23:12 A simple movement system for 2D Games
36:40 Data structures for a 2D multi-layered game world
40:19 Smooth grid based movement similar to Pokemon
54:22 Generating sprite sheet animations
59:48 Share your unique character with others
01:00:32 Introduction to sprite animations
01:13:54 Mastering delta time to ensure consistent frame rates
01:24:03 Collision detection with tiled maps
If you want to SUPPORT me you can use the links below and get some one my EXTENDED classes! :)
www.udemy.com/course/build-an...
www.udemy.com/course/learn-ga...
www.udemy.com/course/remake-r...
www.udemy.com/course/learn-cr...
www.udemy.com/course/creative...
www.udemy.com/course/learn-ht...
www.udemy.com/course/learn-ht...
Get Skillshare FREE for 1 month:
www.skillshare.com/en/r/profi...
The description of this video may contain affiliate links, which means that if you buy one of the products that I recommend, I'll receive a small commission without any additional cost for you. This helps to support the channel and allows me to continue making videos like this. Thank you for the support!
#frankslaboratory
![Web animations. [Canvas Animations] Fractals. Tree modeling [ L-systems ].](http://i.ytimg.com/vi/oePuIcGiffg/mqdefault.jpg)
![Web animations. [Canvas Animations] Fractals. Tree modeling [ L-systems ].](/img/tr.png)
Share your unique character when you make one, but only share the second part of the URL to avoid CZcams spam filter, it deletes comments with links: "#?body=Body_color_olive&head=Orc_male_olive&legs=Pants_black". Step by step process how to use the Spritesheet generator in the video description
#?body=Body_color_pale_green&head=Frankenstein_pale_green&shadow=Shadow_shadow&sex=muscular&weapon=Waraxe_waraxe&legs=Wide_pants_brown
#?body=Body_color_light&head=Human_male_light&belt=none&cargo=Wood_9_logs&backpack=Basket_round&backpack_straps=Straps_black&legs=Pants_blue
Do you want a SOURCE CODE for this, or you prefer to code along and hear me explain what every line of code does and why I choose to implement it that way?
this is the best and most waited project for recent years. Amazing!!! i both two ways! source code and the reason of every line of code!!!
+1 for the source code. It's nice to code along but it always good to have the source code for reference
code along please. best if both.
code along is my way to learn :-) btw: the explanation of the nested loops helped me a lot
Coding along is the best way imo, and I might do some tweaks here and there but if things get messy source code will help with debugging and fixing
Frank you never disappoint. I’ve been watching your videos for years. Even though I’m a fully capable developer at this point, these videos are just plain interesting to watch
Hi, nice to hear this feedback, thank you for letting me know!
Dude! I have to say every time I watch your videos, even if I know most of it, I learn new stuff! It's fun, and pretty well done! Thanks for these "lessons". This is a great way to learn Javascript and games. And it's always entertaining! You're da best! :D
Hi Eric, nice to meet you. Thank you for taking the time and let me know. Great to see this kind of feedback.
Amazing series so far! Thanks, Frank! I'm loving seeing you get more and more comfortable with modules and ES6 with each video. Really clean code!
Hey John. Thank you for your kind words. I like to use modules but to keep this beginner friendly I have to explain how to set it up in every video, so in smaller projects I avoid them.
@@Frankslaboratory Ah okay I see. Really appreciate you taking the time to use them in this video! I already got the project running on my end and I just made my own character in this nifty tool you've provided us! I love it thank you! There were so many options that I'll be sure to better explore, but for now I went with something basic, grim reaper: #?body=Body_color_fur_white&head=Skeleton_skeleton&jacket=Trench_coat_dark_gray&sash=Sash_black&shoes=Armour_steel&weapon=Scythe_scythe&cape=Tattered_black&bauldron=none&shoulders=Mantal_black&bandana=none&headcover=none&hat=Cloth_hood_black&legs=Armour_iron
Thanks again for all the great videos!
Your tutorials are just amazing. Very well edited, explained and also easy to follow. Please keep it up!
Hi Joao, thank you, very happy to get this feedback
Yes, thank you so much. Starting this weekend!
Have fun!
Awesome Frank, awesome tutorial!
That was interesting! 👍Always interesting to watch your tutorials!
Thank you
Thanks for your work, Frank.
Hi Fabio, glad you found some value!
Thank you so much for the tutorials. It has always been enlightening to watch any of your videos here and at Udemy. I just finally understand how to lock gameObjects in a grid and smoothe movement to a destination grid.
I was waiting for this❤
I had a lot of fun with this one. Working on the next thing now
I’ve had several design ideas that fit in this mold on the back burner
Always best tutorials! Thanks Frank!
Glad you found some value
As always a really well explained and easy to follow tutorial of you. I really like the idea of creating a Pixel Art RPG Game and im looking forward to see more videos of you, expanding our project :)
Hey Markus, happy to see you think it was well explained. I want this to be beginner friendly.
The job and effort you put into those videos is amazing. Teaching, explaining and inspiring with really good ideas. Thanks for sharing your knowledge Frank. Keep up the hard work!!!!! 💪
Hi, thank you for your kind feedback, much appreciated
I have learned so much from you, thanks for the clear explanation. Some Idea's for future subject I would like to see are creating and using hexagon and/or isometric maps and characters
Hi Francisco, yes that would be fun to make. Probably more math would be involved. I haven't checked for a while what are the best practices in that area. Will do some research.
Frank, cool as usually! ❤
Thanks Andrew
I just started the tut. I really like how you explain the relations and possible stumbling blocks, so everybody can really understand! Not just just the often common "do this, do that...tadaaa"-magic.
Hi. Yes that's done by design. I gradually explain why and show how it works throughout the video. Did you discover any issue with that approach that I didn't realise?
@@Frankslaboratory yes, you first hardcode an empty object as parameter in the hero to pass to super.
Then at any point you pass a position to hero, which this way of course defaults to 0,0.
I then have changed to pass options and destructure that in GameObject to this[prop] = options[prop] ?? .
But it took me a while, as in your vid it looked like it were working with the empty object (which caused me some wrinkles and grey hairs):
Or it might be I missed the moment you changed to passing all arguments separately though lol
But I really love the way you explain things. Some devs just seem to have forgotten that there are things which are not clear to everybody (as an example CORS and how to view and debug a module, inheritance...)
@@Baba69able I'm trying to understand what you mean. Did you get an error at some point that I didn't get? Is that why you decided to change the syntax I was using?
@@Frankslaboratory I just investigated and can confirm I missed the part where you then passed the full config-object to the constructor (at 22:06).
I think I'll better delete that part of my initial comment to not confuse any readers 😅
But thank you for your fast response and a big SORRY for passing MY confusion
@Baba69able no problem. It's good to talk about this. I will try to make that part more clear next time. Thank you for your feedback
This is awesome. Exactly what I was looking for o7
Hey, glad you found some value! thanks for leaving a comment
Hey Frank, Jon here -- it's been a while. You're videos have gotten top-notch professional at this point! Well done! I'm happy to see how far you've gotten over the years! That contract that you helped me get (I think it lasted about 3 years) is coming to an end this very weekend. It was planned, and I was informed about this ending many years ago. It was the best job I've ever had and I got a lot of experience. Thanks for your videos which greatly helped me get out of my burned-out states. Well, as I try to figure out what to do next ( I've got some plans ) I'll be keeping up with your vids a lot more. I may start my own, new, channel (it depends on what direction my plans go).
Hey Jon, it's been a while .Nice to see you here. Sounds like you had a great run, and we know it's a bit easier to get the next job once you have some relevant experience on your CV, so I hope your future is bright.
It was a useful video, interesting and educational. Thanks for your work. Like!
Hey man, nice to meet you, I can see you make games in Godot, awesome
this was amazing, thank you
Glad you liked it
Thank you Frank, I always learn a lot from your videos! As you mentioned in this one, it would be great if we could learn to implement a more complex sprite animation system :D
Thanks for letting me know. I will do that in one of the follow up classes.
Good Stuff, and I don't mind following along. I just slow them down to 75%. I do know that newer / beginners would like the source code. I always steered away from it until I was stuck and need to tap out and look at what was working in order to continue to make it work. Thanks for your time with theses many have benefited !!
Hi Will, are you saying I go too fast? I can try to slow down for the next video.
@@Frankslaboratory No it is me .....I find it is easier to slow them down to follow along. You're doing a great job. I have a hard time listening and watching, while trying to type. If I watched the video straight through first and then tried to follow it will be easier. I like many have a challenge in learning new materials. And just need to find the extra steps folks like me need to understand it completely. Peace ...
Thanks a lot for this excellent content!!
I'm here to help!
Good stuff Frank.
Hi Elon, thank you!
finaly the video came for which we were waiting can you also make a short video on the data storing i local files such as after game saved data in and file and then use that data to continue game from we left
Hey Mohan, good idea, I will make a note and I will try to include this when suitable
please make the deep dive! haha thanks for the vids! the best
Would love if you could explore more RPG ( Stardew valley, Graveyard Keeper etc. ) , something one could build upon after tutorial and publish it too. That would enable us to convert that base game to something bigger based on story/scenario we can think of. Lot of tutorials present on YT explore similar types of games ( Tetris, puzzle based etc. ) , but very few tutorials like yours enable beginners to explore more ready to publish, story based games.
Thank you for the suggestion. I would really like to do that. I have to teach a few important individual pieces first. Probably I will do it in separate videos so I can properly explain each technique. Still planning where to take this series of projects. I don't think beginners should worry too much about publishing. The first few games are not going to be great but they will be important learning experiences. But I guess the idea gives people the goal to work towards.
@@Frankslaboratory Thanks, would be really helpful. For anyone aspiring to be Indie developer, your channel is really helpful. Hoping for more such content ..........
Nice video Frank! Thanks!
The dot JS thing in VSC is really annoying. I think for the first import, VSC doesn't know the type of the file you are importing, that's why it leaves it blank.
After the first import, it uses the already known file type - unless, the new import, because of the auto sort, becomes the first line again, than VSC forgets the file type once more.
As I said: very annoying!
Ah. Finally an explanation. It makes sense now. Thank you for taking the time to clarify this mystery for me
I just made this account so I can say thank you and give a like and subscribe. I love games and learning how to make them.
Ah, thank you for making the effort, I appreciate your comment, nice to meet you!
CZcams recommended for the first time a good channel. Subscribed. Liked. Thank you for the video i will check other videos too.
Awesome. Nice to meet you
This is plain amazing... How did you even come up with this?
one of the best tutorials .. sir I appreciate you ...... and thank you a lot and lots of love from Pakistan...
Hi, nice to meet you. Greetings to Pakistan!
excelent video, very educative, The video is very well explained, easy to follow.I want you to go deeper in another video about how to implement small sprites.
There is something in my code that I did wrong because the character's movement is not coordinated with the grid, it stops between the grids
If the hero stops between cells, check it's starting position, it's probably there. You can figure out what's wrong by console logging values related to positioning, and it should be clear what's wrong.
1:12:10 Please make a video of this! This would be very helpful since I still am quite terrified with animations and sprite sheets. I still need a lot of time wrapping my head around deltaTime and such. Anyway, great video! Looking forward to future ones!
I will do that, multiple people requested already, thank you for letting me know
@@Frankslaboratory Thank you so much! I aspire to be as knowledgeable as you in the future!
EXCELLENT FORESIGHT ON USING DELTA TIME FOR A BROAD RANGE OF CURRENT HARDWARE, SIMILARLY WE SHOULD BE CONSIDERING SVG / VECTOR ART TWEENING FOR FUTURE FAST HARDWARE
WITH THE GOVERNOR DISABLED, APPLES M1 CHIP FROM FOUR YEARS AGO IS THREE HUNDRED TIMES FASTER THAN WHAT YOU ARE WORKING WITH AND THERE ARE MUCH FASTER CHIPS ON THE MARKET NOW, AT LEAST IN THE USA
THE WAY I SEE IT DYNAMIC TWEENING OF VECTOR ART WILL SET THE STANDARD FOR TODAYS GAMES TO RUN NATIVELY IN BROWSERS DECADES PERHAPS EVEN CENTURIES FROM NOW RATHER THAN JUMPING THROUGH EMULATION LIKE WE'VE HAD TO DO FOR THE PRIOR GENERATIONS
Please bring a tutorial to build a complete 2D pixel art game
You are amazing man
Please can make complete rpg game with backend
Hi. Glad you found some value. It's a lot of work to make a complete game with backend into a tutorial, that's why there aren't many videos on that
You the best.
Thank you!
🔥🔥🔥🔥🔥
❤️
Valeu!
Thank you ❤️
its time for vampire survivors clone!!!
Yup, that game is mostly about optimisations, because there are many things animating on screen at once.
Do you plan to implement entity component system with events & co.?
I was thinking to kinda mimic the way Unity does it, but in that case I might as well use a game engine. Not sure what I will do with it yet.
@@Frankslaboratory would be great to get an idea how ecs works internally and how to handle events. I think composition is a great tool to make a game with hundreds of movable entities and not to screw the performance :)
u r awesome
Thank you 😊
Hello frank two years ago i made a game thanks to your tutorials and got the grade A+ can i show it you and you can share it
Hi, happy to hear that, well done on your A+. Yes feel free to share your projects, ideally email. I will check when I have time and see what you did there. Ideally with code included
I just want to ask. I am building a cyberpunk themed game in pygame with python. Can I please use your Universal LPC Sprite Sheet Generator to make some characters? I will credit you if I ever publish it. Great video, I love the direction of gaming types videos you are making.
Awesome. Cyberpunk theme is a great choice. The Sprite Generator website is not mine. I just use it in this video. There is a license if you generate your character and scroll to the bottom. You should read that. Each body part can have a different author and they require credit.
@@Frankslaboratory I see I will go have a look thank you very much. Your channel really is awesome and the quality of your videos is excellent. I can quickly post like a 30 seconds video of the game if you would like to see? If not I understand 100% and thank you again for these high quality videos.
@@Frankslaboratory czcams.com/video/YdZkrOj4a7M/video.html
@alwaysquestionyouropinions1119 yes. Show me your game when you get a chance. Always interesting to see what other people are working on. What art are you using for your game world. Did you draw it yourself or you found it somewhere online
@@Frankslaboratory CZcams keeps removing my video link but it is the only video I have on my channel and it is only 48 seconds long.
Hi Frank
Hi! :)
hi!
Hi Erica!
Can you remake this video for pygame ❤
Hi Anthony, I would love to but I know only JavaScript and C#, I'm not the best person to teach pygame
@@Frankslaboratory Thank you I will watch anyway and maybe pick up some Java in the process 😇
hi to me
I asked for it... 🤣
Hi
Hello!
why do you think you created gta6 ???????
:D
blud this stuff isnt easy, maybe try learning instead of complaining, it's honestly amazing how fast he makes these games and such high quality videos at the same time
Build this themes vanilla JS with OOP:
1. Build Videoplayer like CZcams Player (All functionality).
2. Build Image Cropper.
3. Build Image and Video Editor.
4. Build custom range slider.
Thank you for all.
Your technique is advance not for bigenners sorry I sow all your videos but not suitable, teach it In beginners level not as you learn it
I agree, this is not good for complete beginners. I always recommend doing a big complete JavaScript beginner course first. When you do that this should be easy to follow.
let hero
let upbtn,downbtn,leftbtn,rightbtn
let isCollided=false
let cols=20
let rows=20
let tileSize=20
let gameWidth=rows*tileSize
let gameHeight=cols*tileSize
let moveDelay=5
let scale=4
function seting(button,name){
button.elt.ontouchstart=()=>{
if(name=="up"){
hero.vly=tileSize/scale
}
if(name=="down"){
hero.vry=tileSize/scale
}
if(name=="left"){
hero.vlx=tileSize/scale
}
if(name=="right"){
hero.vrx=tileSize/scale
}
}
button.elt.ontouchend=()=>{
if(name=="up"){
hero.vly=0
}
if(name=="down"){
hero.vry=0
}
if(name=="left"){
hero.vlx=0
}
if(name=="right"){
hero.vrx=0
}
}
}
function setup() {
createCanvas(400, 400);
hero=new Hero()
upbtn=createButton("up")
downbtn=createButton("down")
leftbtn=createButton("left")
rightbtn=createButton("right")
seting(upbtn,"up")
seting(downbtn,"down")
seting(leftbtn,"left")
seting(rightbtn,"right")
}
class Hero{
constructor(){
this.x=100
this.y=200
this.vlx=0
this.vly=0
this.vrx=0
this.vry=0
}
update(){
this.x+=this.vrx
this.x-=this.vlx
this.y+=this.vry
this.y-=this.vly
}
show(){
rect(this.x,this.y,20,20)
}
stop(){
this.vly=0
}
}
function mousePressed(){
console.log(hero.x,hero.y)
}
function checkCollision(x1, y1, s1, x2, y2, s2) {
return (x1 < x2 + s2 &&
x1 + s1 > x2 &&
y1 < y2 + s2 &&
y1 + s1 > y2);
}
function drawGrid(){
stroke("red")
fill(0)
for(let x=0;x
Hi Akash, you are only stopping vertical movement so far so I assume you are giving me code in progress, not the final code. I would love to help but if I start debugging and rewriting custom code for people I will upload even less videos :D
It's quite simple code, should be easy to fix. If you are completely stuck I would advise you to follow more tutorials and do exactly what people are doing and eventually it will become very easy to create your own solutions like you are trying to do here. I don't think what you are giving me is my code, I never used this collision technique in any of my tutorials. I do it differently.