Pixel Art Game Development: 2D Camera
Рет қаралды 16,381
Күн бұрынDo you want to build pixel art games that extend beyond a single screen for your players to discover and explore? Then you need to understand how to implement 2D camera into your projects. It might be easier than you think. This class is for beginners, basic understanding of programming principles is recommended to get the maximum value.
Check out these awesome pixel art games that utilize the same techniques we are learning about today:
Super Zoo Story • Super Zoo Story (Stard...
Bloomtown: A Different Story • Bloomtown: A Different...
World of Anterra • World of Anterra Trail...
Drakantos • Drakantos | Official G...
Emberbane • Emberbane - Kickstarte...
Tilemaps for beginners:
• Make Pixel Art Games: ...
🍄 Download Project Art assets 🍄
Full map: www.frankslaboratory.co.uk/do...
Tile map: www.frankslaboratory.co.uk/do...
If you fully understand this technique, try to take it to the next level using these EPIC free art assets:
free-game-assets.itch.io/free...
free-game-assets.itch.io/free...
Today we will learn:
- How to implement 2D camera
- How to create game world using 2 layers of tiles (ground layer + vegetation layer)
- How to connect camera and tile map to dynamically draw only tiles that are inside the visible camera view
🎨 Toolkit 🎨
Vanilla JavaScript for everything as always, no frameworks and no libraries. Visual Studio Code editor + Live server extension recommended.
00:00 Scrolling through expansive game worlds
00:40 How to implement 2D camera
26:20 2D Multi-Layer tilemap design
40:38 Dynamic auto tiling
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 Ай бұрын
Tilemaps + 2D scrolling camera allow us to build so many types of 🎮. Click the 👍 if you found some value.
@Nodsaibot Ай бұрын
add animation "drag" to camera movement (ease-in, or see cubic bezier)
@Frankslaboratory Ай бұрын
@@Nodsaibot Good idea, I wanted to keep this episode beginner friendly, but easing would be nice for sure, making a note
@Push_ups__ 28 күн бұрын
Can you teach us everything that we need to know to build our own game with characters, NPCs, interactions e.g. jumping, sprinting/stamina, NPC interactions and entering new levels or rooms, and challenges.
@Push_ups__ 28 күн бұрын
Do you use Asprite for these assets and do you think it is worth downloading? Btw, I love your content. Thanks!
@TheStRaX_ Ай бұрын
awesome dude, I really wanted to see a video on full game means a world, levels, power ups, boss. a full working game player can move around, camera etc
@Frankslaboratory Ай бұрын
Hi, I will do a full series of features if people are interested in it.
@Frankslaboratory Ай бұрын
What do you mean
@TheStRaX_ Ай бұрын
@@Frankslaboratory l mean a complete game series with camera, cause you haven't made any game with camera.
@offgridvince Ай бұрын
@Frankslaboratory yes, very interested
@Frankslaboratory Ай бұрын
@@TheStRaX_ It's true actually. I never made any game tutorial that uses camera. I would like to cover basics in a separate small projects like this video and then use those techniques for multiple different games.
@atandatosinpeter427 14 күн бұрын
You are the best! I didn't realise until now that implementing a 2D camera could be so easy. Thank you so much for the insight.
@rocketscript9666 Ай бұрын
I been waiting long time for this. Thank you so much. Cant wait for more videos related to tile map game. Hopefully you will expand it, we all want to learn much more about these kind of games development. Thanks again for your great work.👍
@Frankslaboratory Ай бұрын
Glad you found some value, I want to use this for a top down RPG, tower defense and a platformer. At least now that't the plan
@OhluhKayTall Ай бұрын
Just wanted to say this has been incredibly helpful! My background is in front-end web dev and I've struggled with game concepts sticking because my learning style is visual and analogous. Like, I couldn't find the words to say "man, this stuff can really translate over to game development. If only there were something web technology focused to help connect the dots. And this shows up on my feed. Seriously, thanks. Very easy to follow so far.
@Frankslaboratory Ай бұрын
Hey. Nice to meet you. Glad you found some value. I think the third final section of the video where I combine tilemap with camera could be explained better. I will do another class on this to go more in detail
@dev1ce-wk3hg 4 күн бұрын
Thanks for the new video, learned a lot again!
@CodingTube Ай бұрын
Very useful tutorial, thank you very much!
@granumuse7847 Ай бұрын
I didn't know that we can constrain camera view boundaries with min and max 😮 It was great, Frank. Thank you 😊❤
@Frankslaboratory Ай бұрын
Hi. Yea it's a nice little formula. I never used this one before
@jesusbecerra3345 Ай бұрын
This is one of the most anticipated videos for me, I hope you end up making a full course in 2d animation. Instant buy for me 😁
@Frankslaboratory Ай бұрын
Hi Jesus, I would like to make a full 2d animation course, these videos take so much time to make, I would probably need to take holidays in my other job to put that together.. It might happen.
@gflaap Ай бұрын
Hi Frank, would be great if you could do this course. I would pay for That! Maybe you can do it in small parts of during xmas break:)
@samuelbaran Ай бұрын
Please make more, this is amazing !
@Frankslaboratory Ай бұрын
I will. Thank you for the feedback. Very kind
@karlkoch3345 Ай бұрын
Gargoyle! Another great tutorial, learned alot!
@Frankslaboratory Ай бұрын
Hi Karl, nice to see you. Glad you like it
@Radu Ай бұрын
Wow! Really cool 🙂 I have on my list some pixel-art related projects, but, unfortunately, they won't come this year, at least.
@starstuff606 Ай бұрын
thanks so much for these informative videos. specifically this, and the tilemap one :D
@Frankslaboratory Ай бұрын
I'm here to help. Hope the next one is useful as well
@user-ii5pq3jf1z Ай бұрын
Your videos are very good, I managed to learn this part. I've already learned how to use a canvas buffer so that I only draw on the buffers when the camera is moving and the buffers are used on the main canvas. I've already created the animations for certain tiles, the problem is that I don't know the best way to make the tiles that are animated when they are outside the camera stop having their animations updated, and how to make the animations work when there are buffers.
@PopLll-lo9ot Ай бұрын
The best every time ❤
@Frankslaboratory Ай бұрын
Thank you 😊
@HuynhLuong227 Ай бұрын
OMG, wait next video, thanks for sharing
@Frankslaboratory Ай бұрын
Next video is designing and animating many different pixel art characters. Working on it now.
@HuynhLuong227 Ай бұрын
@@Frankslaboratory oh, really? big thanks. :D
@i_AmCurious Ай бұрын
Very much appreciated 🎉🎉
@Frankslaboratory Ай бұрын
Hi Jisan, nice to meet you
@raptyk Ай бұрын
@frankslabiratory Are you planning to prepare a video in which you will discuss isometric tilemaps?
@karthik947 Ай бұрын
Thanks Frank, Could you do a series on WebGPU if possible.
@WEBSTART-LIVE Ай бұрын
Hey! What a funny coincidence! We released very similar videos, and the difference in release times is just a few hours. However, I explain in more detail how to make a level generator. My video is titled "Javascript Map Generator" :)
@Frankslaboratory Ай бұрын
Hey man, I think we spoke before, I'm subscribed to your channel. Will check your video, curious to see how you did it. I can see it's in another language, I hope the subtitles will be accurate.
@shahfaisal3923 Ай бұрын
you blow my mind. Love and respect from Afghanistan.
@Frankslaboratory Ай бұрын
Hey Shah. Nice to meet you. Greetings to Afghanistan
@PabloGaraguso Ай бұрын
Excellent
@Frankslaboratory Ай бұрын
Thanks Pablo
@goffyfoot82 Ай бұрын
I still use Notepad++ and setup browser-sync in a package.json, it helps if you are learning backend with Node.js or moving toward Express and such. It forces you to type everything out. And the extra repetition is something I need to help retain it.
@Frankslaboratory Ай бұрын
Nice one, this is exactly what I asked for, interesting to hear what setup other people use. Thanks for sharing.
@Addictionunlocked Ай бұрын
❤️❤️❤️❤️❤️❤️
@Evan-jd6pe Ай бұрын
Great video as usual - curious why when creating the camera crop you reduced the game area to 512 instead of setting the crop to 512 and keeping the initial game area?
@aylictal Ай бұрын
Great tutorial frank. Be careful with naming conventions of naming your class Map as Map is already a keyword in javascript for the Map object, its similar to Object but operates a little differently. It seems to work and behave fine now but in the future it may not or may throw an error if you try to name a class as such. Just a heads up
@Frankslaboratory Ай бұрын
Hi. Good point. Well spotted. Probably the best idea would be to rename my Map class to something else entirely
@user-vy6ek9hj9m Ай бұрын
thx
@Frankslaboratory Ай бұрын
I'm here to help
@randomfinn404 Ай бұрын
@Frankslaboratory Hello! I have a few questions you could hopefully answer. How would you implement this camera system if you have a player character that should stay in center of the screen when possible? What about using world coordinates that you get from tiled json exported maps? For example spawn point x, y from an object layer. These should be the real x,y and not the x,y calculated from cameraview topleft?
@Frankslaboratory Ай бұрын
Hi, I'm not sure if KZfaq will allow me to leave a link here in the comment but this is how you can do it. You can inspect the source code to see how they are handling the character positioning when near the edges. I will make a detailed episode on this soon I hope. This codebase should be fully compatible with data export you get from Tiled, I will also make a video on that. it's hard to describe all these things in a comment.
@Frankslaboratory Ай бұрын
mozdevs.github.io/gamedev-js-tiles/square/logic-grid.html
@akashvanionwards912 Ай бұрын
Frank, can you help in my project, i have ur collision detection formula but after coliding to a rectangle, what should I do inside if(isCollided){. }(x is the current position and dx is the increment)
@Frankslaboratory Ай бұрын
What you should do inside the collision block depends on what game you are building. Destroy the colliding objects? Push one of them away from the collision point? Reduce lives of the object by 1? There are many things you can do in there
@edwardodavinci55 Ай бұрын
is there a reason why i should not use setTransform to move the camera? Is it better to crop out the part i want with the drawImage method?
@Frankslaboratory Ай бұрын
I haven't tried it with setTransform. It might work as well.
@edwardodavinci55 Ай бұрын
@@Frankslaboratory I am new to HTML Canvas, but I have used setTransform so far. Your videos helped me to get started so thank you very much
@RobertoRenovato Ай бұрын
Great! But the title is a bit misleading because the tutorial is not specific for pixel art based sprites, could be any tile-based graphics.
@Frankslaboratory Ай бұрын
Hi Roberto. Yes it is a generally useful set of techniques. Some bits like scaling the tiles and disabling image smoothing are pixel art specific. The the goal is for this to be a lead up for a final pixel art game class
@RobertoRenovato Ай бұрын
@@Frankslaboratory Oh, I see. Thank you.
@offgridvince Ай бұрын
Is this part 1? I couldn't find the other video. Should I just stay tuned?
@Frankslaboratory Ай бұрын
There is a simplified version of this in the previous upload but this video is standalone. No need to watch the other one unless this one is too advanced for you.
@offgridvince Ай бұрын
@@Frankslaboratory thx 4 the prompt response. I was referring to collision detection
@offgridvince Ай бұрын
@46:35 Collision Detection
@Frankslaboratory Ай бұрын
@@offgridvince Ah, I haven't released that part yet
@faiyazrasul2050 26 күн бұрын
pls make videos on js web animation api
@tarcisiooliveira8810 Ай бұрын
Hello, is there any way to prevent players from changing variable values, prevent players from cheating?
@zoltanhorvath2238 15 күн бұрын
This is cool, please provide a github repo with the code.
@javifontalva7752 Ай бұрын
why are you using an array for keys instead of a set?
@Frankslaboratory Ай бұрын
Hi. The order of elements is important for the technique I'm using here. I want to have a queue of keys so I need indexed order of elements. Array is perfectly fine and makes it also easier to convert to another programming language. I'm not sure if all other languages have an equivalent of Set.
@aravindvv2276 Ай бұрын
😍😍😍 yes i want, and I know, if anyone can teach me, its youu Frank ❤
@Frankslaboratory Ай бұрын
Hi Aravind ❤
@aravindvv2276 Ай бұрын
Hey ❤ I am busy with my life atm, but I promise I will come back in a month or so and will follow this tutorial and learn, and I request you to make a complete series of this 😊 Thanks in advance ❤
@nickpresler1362 Ай бұрын
When is the next episode coming?
@Frankslaboratory Ай бұрын
Hi Nick, next episode is big, I need to edit it
@_D3adB0y_ Ай бұрын
Im surprised you dont just use KaboomJS
@Frankslaboratory Ай бұрын
What's the advantage of Kaboom?
@JSLegendDev Ай бұрын
@@Frankslaboratory Makes making games in JS very easy. You can check some of my tutorials if you want to check it out.
@Frankslaboratory Ай бұрын
Ah. Nice. I subscribed to your channel. Will watch some of your work when I have time.
@JSLegendDev Ай бұрын
@@Frankslaboratory Thanks!
@sebastianroy212 Ай бұрын
Where are the files? Where is the repo? I don't want to waste time copying from the screen
@Frankslaboratory Ай бұрын
This video is mostly about explanations and understanding the code. If you want code you can just copy and paste Google "Tiles and tilemaps overview" and check MDN Web Docs write up on this topic, down on the page they have 3 separate demos, grab source code from that. Also you can email me if you want my version of the code.
@sebastianroy212 Ай бұрын
@@Frankslaboratory Why don't you directly say "if you want the code you can buy it at this link"
@jumfive Ай бұрын
@@sebastianroy212this comment is rude 😅
Kirill Multitool
Рет қаралды 71 МЛН