Pixel Art RPG Maker with JavaScript
Рет қаралды 16,713
Күн бұрын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). KZfaq 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
@Frankslaboratory 20 күн бұрын
Share your unique character when you make one, but only share the second part of the URL to avoid KZfaq 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
@Frankslaboratory 17 күн бұрын
#?body=Body_color_pale_green&head=Frankenstein_pale_green&shadow=Shadow_shadow&sex=muscular&weapon=Waraxe_waraxe&legs=Wide_pants_brown
@Frankslaboratory 17 күн бұрын
#?body=Body_color_light&head=Human_male_light&belt=none&cargo=Wood_9_logs&backpack=Basket_round&backpack_straps=Straps_black&legs=Pants_blue
@VectorNodes 20 күн бұрын
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
@Frankslaboratory 20 күн бұрын
Hi, nice to hear this feedback, thank you for letting me know!
@Frankslaboratory 20 күн бұрын
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?
@worldbest3097 20 күн бұрын
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!!!
@vase9145 20 күн бұрын
+1 for the source code. It's nice to code along but it always good to have the source code for reference
@Charizm0 20 күн бұрын
code along please. best if both.
@IonizedSun 20 күн бұрын
code along is my way to learn :-) btw: the explanation of the nested loops helped me a lot
@randomfinn404 20 күн бұрын
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
@AndreiTornyai 9 күн бұрын
i am a web developer and for my job i always build websites and webapplication therefore using js everyday.. ive always been intrigued by the games made out of js and always wanted to learn about the thinking behind the code and your videos are awesome! they are giving me an awesome and complete overview of how the code and logic is being implemented. I hope you will do more videos like this. I am already buying your online courses to learn more about it. Building a game like this i think its everyone dream come true
@ericfourmaux833 15 күн бұрын
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
@Frankslaboratory 11 күн бұрын
Hi Eric, nice to meet you. Thank you for taking the time and let me know. Great to see this kind of feedback.
@rrahll 19 күн бұрын
Awesome Frank, awesome tutorial!
@joemesot 2 күн бұрын
I am a very good front end web developer, but one thing I have never tackled is game development in JS. I can say that the techniques used in front end development are no where near the same as doing this. These tutorials are fantastic, and the way you go over them in detail is super helpful. Thank you so much for this. I would love to see more information around creating the tile sets in tiled, and a isometric tutorial would be awesome, as well as object interaction like NPCs, dialog bubbles, etc., and maybe some UI and menus.
@AndreiTornyai 8 күн бұрын
i love this series of yours . Cant wait for the next tutorials. Thank you again!
@larjasoul 6 күн бұрын
Let's make one thing clear: you are epic dude. Your content is consistently jaw-dropping. What a tremendous talent, both in software and education.
@johndigirolamo5858 20 күн бұрын
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!
@Frankslaboratory 19 күн бұрын
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.
@johndigirolamo5858 19 күн бұрын
@@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!
@rrahll 19 күн бұрын
That was interesting! 👍Always interesting to watch your tutorials!
@Frankslaboratory 18 күн бұрын
Thank you
@fabfer 20 күн бұрын
Thanks for your work, Frank.
@Frankslaboratory 20 күн бұрын
Hi Fabio, glad you found some value!
@offgridvince 19 күн бұрын
Yes, thank you so much. Starting this weekend!
@Frankslaboratory 19 күн бұрын
Have fun!
@rrahll 19 күн бұрын
Always best tutorials! Thanks Frank!
@Frankslaboratory 18 күн бұрын
Glad you found some value
@Radu 6 сағат бұрын
Really Awesome! Hmm, that Universal LPC Spritesheet Character Generator reminded me of that character maker idea we played around with a while ago. Would be cool to get that working someday, but I haven't had time to work on it, unfortunately. Maybe after I'm done with the Advanced Drawing App live streams I'll switch to that other project :-)
@AR-Creation-nk5yj 20 күн бұрын
I was waiting for this❤
@Frankslaboratory 20 күн бұрын
I had a lot of fun with this one. Working on the next thing now
@Silas_standley 19 күн бұрын
I’ve had several design ideas that fit in this mold on the back burner
@RthmnNdrsn 20 күн бұрын
This is awesome. Exactly what I was looking for o7
@Frankslaboratory 20 күн бұрын
Hey, glad you found some value! thanks for leaving a comment
@markus4437 18 күн бұрын
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 :)
@Frankslaboratory 17 күн бұрын
Hey Markus, happy to see you think it was well explained. I want this to be beginner friendly.
@andrewcool482 19 күн бұрын
Frank, cool as usually! ❤
@Frankslaboratory 18 күн бұрын
Thanks Andrew
@AndreiTornyai 8 күн бұрын
yes we want the "character state based animation" class as well :D
@Games2Dev 20 күн бұрын
It was a useful video, interesting and educational. Thanks for your work. Like!
@Frankslaboratory 20 күн бұрын
Hey man, nice to meet you, I can see you make games in Godot, awesome
@atandatosinpeter427 14 күн бұрын
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.
@JVRadioArg 19 күн бұрын
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!!!!! 💪
@Frankslaboratory 19 күн бұрын
Hi, thank you for your kind feedback, much appreciated
@captaindesign 18 күн бұрын
this was amazing, thank you
@Frankslaboratory 18 күн бұрын
Glad you liked it
@joaocesarlima7339 11 күн бұрын
Your tutorials are just amazing. Very well edited, explained and also easy to follow. Please keep it up!
@Frankslaboratory 11 күн бұрын
Hi Joao, thank you, very happy to get this feedback
@fdorsman 17 күн бұрын
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
@Frankslaboratory 17 күн бұрын
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.
@dimuar 7 сағат бұрын
Thanks :) I did it for the first time, everything is very clear and interesting.
@aritzolaba 16 күн бұрын
Thanks a lot for this excellent content!!
@Frankslaboratory 11 күн бұрын
I'm here to help!
@JM-de2gh 19 күн бұрын
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).
@Frankslaboratory 19 күн бұрын
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.
@portzdev 3 күн бұрын
Amazing videos! u r the best!
@northstrider9863 18 күн бұрын
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
@Frankslaboratory 17 күн бұрын
Thanks for letting me know. I will do that in one of the follow up classes.
@jiggity8289 15 күн бұрын
please make the deep dive! haha thanks for the vids! the best
@ElonRust42069 19 күн бұрын
Good stuff Frank.
@Frankslaboratory 19 күн бұрын
Hi Elon, thank you!
@Baba69able 18 күн бұрын
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.
@Frankslaboratory 18 күн бұрын
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?
@Baba69able 18 күн бұрын
@@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...)
@Frankslaboratory 18 күн бұрын
@@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?
@Baba69able 18 күн бұрын
@@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
@Frankslaboratory 18 күн бұрын
@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
@gsdealer7691 20 күн бұрын
You the best.
@Frankslaboratory 20 күн бұрын
Thank you!
@goffyfoot82 20 күн бұрын
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 !!
@Frankslaboratory 20 күн бұрын
Hi Will, are you saying I go too fast? I can try to slow down for the next video.
@goffyfoot82 19 күн бұрын
@@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 ...
@rrazaros 19 күн бұрын
KZfaq recommended for the first time a good channel. Subscribed. Liked. Thank you for the video i will check other videos too.
@Frankslaboratory 18 күн бұрын
Awesome. Nice to meet you
@theEDITORviral 20 күн бұрын
one of the best tutorials .. sir I appreciate you ...... and thank you a lot and lots of love from Pakistan...
@Frankslaboratory 20 күн бұрын
Hi, nice to meet you. Greetings to Pakistan!
@gameNOOB101 20 күн бұрын
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.
@Frankslaboratory 20 күн бұрын
Ah, thank you for making the effort, I appreciate your comment, nice to meet you!
@fabfer 20 күн бұрын
Valeu!
@Frankslaboratory 20 күн бұрын
Thank you ❤️
@webdevtech9724 19 күн бұрын
🔥🔥🔥🔥🔥
@Frankslaboratory 19 күн бұрын
❤️
@blankeyezero 15 күн бұрын
This is plain amazing... How did you even come up with this?
@MohanBist-fk6ks 20 күн бұрын
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
@Frankslaboratory 20 күн бұрын
Hey Mohan, good idea, I will make a note and I will try to include this when suitable
@Nikhil-gm8ks 18 күн бұрын
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.
@Frankslaboratory 18 күн бұрын
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.
@Nikhil-gm8ks 17 күн бұрын
@@Frankslaboratory Thanks, would be really helpful. For anyone aspiring to be Indie developer, your channel is really helpful. Hoping for more such content ..........
@darkryudaniel 18 күн бұрын
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
@Frankslaboratory 18 күн бұрын
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.
@PopLll-lo9ot 19 күн бұрын
You are amazing man Please can make complete rpg game with backend
@Frankslaboratory 17 күн бұрын
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
@Pizzaboi87 9 күн бұрын
Hi Frank, it was amazing like always. Don't you want to expand this project to a full-scale game with sounds, menu, different levels, and enemies? I've been following your channel for a long time, and I would be curious to know how I should build a full game.
@theunknownonetuo2033 19 күн бұрын
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!
@Frankslaboratory 17 күн бұрын
I will do that, multiple people requested already, thank you for letting me know
@theunknownonetuo2033 17 күн бұрын
@@Frankslaboratory Thank you so much! I aspire to be as knowledgeable as you in the future!
@atharv4408 17 күн бұрын
u r awesome
@Frankslaboratory 17 күн бұрын
Thank you 😊
@hachetrescomacatorce2340 12 күн бұрын
its time for vampire survivors clone!!!
@Frankslaboratory 11 күн бұрын
Yup, that game is mostly about optimisations, because there are many things animating on screen at once.
@ChicoPiranha 18 күн бұрын
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!
@Frankslaboratory 18 күн бұрын
Ah. Finally an explanation. It makes sense now. Thank you for taking the time to clarify this mystery for me
@Silas_standley 11 күн бұрын
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
@Silas_standley 10 күн бұрын
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
@Silas_standley 10 күн бұрын
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
@ashwinshrestha8757 10 күн бұрын
Please bring a tutorial to build a complete 2D pixel art game
@biovawan 14 күн бұрын
Do you plan to implement entity component system with events & co.?
@Frankslaboratory 11 күн бұрын
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.
@biovawan 11 күн бұрын
@@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 :)
@alwaysquestionyouropinions1119 20 күн бұрын
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.
@Frankslaboratory 20 күн бұрын
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.
@alwaysquestionyouropinions1119 20 күн бұрын
@@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.
@alwaysquestionyouropinions1119 20 күн бұрын
@@Frankslaboratory kzfaq.info/get/bejne/j8qKntWAz5rFZ4E.html
@Frankslaboratory 20 күн бұрын
@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
@alwaysquestionyouropinions1119 20 күн бұрын
@@Frankslaboratory KZfaq keeps removing my video link but it is the only video I have on my channel and it is only 48 seconds long.
@dmkanz 16 күн бұрын
Hi Frank
@Frankslaboratory 11 күн бұрын
Hi! :)
@ericajcruz 15 күн бұрын
hi!
@Frankslaboratory 11 күн бұрын
Hi Erica!
@temmmbebkd2922 18 күн бұрын
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
@Frankslaboratory 17 күн бұрын
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
@temmmbebkd2922 8 күн бұрын
@@Frankslaboratory cool thanks
@temmmbebkd2922 8 күн бұрын
@@Frankslaboratory cool thanks
@Emblazon 20 күн бұрын
hi to me
@Frankslaboratory 20 күн бұрын
I asked for it... 🤣
@fengsho2991 9 күн бұрын
Can you make money from making these and selling them on market places?
@YuushaExa 7 күн бұрын
Maybe yes, maybe no. It's depend on luck and quality of game. Most games fail and bring 0. While some weird games get players and profit depending on popularity.
@alwaysquestionyouropinions1119 2 күн бұрын
@@YuushaExa no read the website terms of service you do not own these pieces of art you made.
@knextkoder 12 күн бұрын
Hi
@Frankslaboratory 11 күн бұрын
Hello!
@anthonydrakefordshadow 13 күн бұрын
Can you remake this video for pygame ❤
@Frankslaboratory 11 күн бұрын
Hi Anthony, I would love to but I know only JavaScript and C#, I'm not the best person to teach pygame
@anthonydrakefordshadow 11 күн бұрын
@@Frankslaboratory Thank you I will watch anyway and maybe pick up some Java in the process 😇
@TheTeamofMuhammad 20 күн бұрын
Build this themes vanilla JS with OOP: 1. Build Videoplayer like KZfaq Player (All functionality). 2. Build Image Cropper. 3. Build Image and Video Editor. 4. Build custom range slider. Thank you for all.
@aladeotman1259 19 күн бұрын
why do you think you created gta6 ???????
@Frankslaboratory 19 күн бұрын
:D
@techtime3125 19 күн бұрын
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
@Flipper_Auu 12 күн бұрын
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
@Frankslaboratory 11 күн бұрын
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.
@akashvanionwards912 18 күн бұрын
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
@Frankslaboratory 17 күн бұрын
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.
Will Hess
Рет қаралды 163 М.
The Spiffing Brit
Рет қаралды 1,7 МЛН