Pygame Tile Based Game Tutorial: Tilemaps

แชร์
ฝัง
  • เผยแพร่เมื่อ 14 ต.ค. 2024
  • In this video, we'll discuss tilemaps. We'll learn how we can create them using Tiled, as well as how we can parse them into pygame.
    Code can be found on my github: github.com/Chr...
    Download tiled: www.mapeditor....
    Personal Channel - / @sunset_cd
    My video on sprite sheets: • Pygame Sprite Sheet Tu...
    Music:
    Pokemon Gold/Silver/Crystal - Violet City, Azalea town
    #pygame #tiled #gamedev

ความคิดเห็น • 77

  • @rubixsolution
    @rubixsolution 4 ปีที่แล้ว +39

    I tried to teach my son some coding, he loves drawing games on paper and this shows in easy steps how to use pygame. He can spend the rest of his life frustratedly scrolling through stackoverflow, but I'm excited how you explain how you start from zero making something appealing and repeatable.

    • @CDcodes
      @CDcodes  4 ปีที่แล้ว +13

      Glad I could be of help! Coding/gamedev is awesome, I wish I had started younger! Hope your son has fun on his coding journey : )

  • @dicember92
    @dicember92 3 ปีที่แล้ว +11

    man, I've always thought that making tile-based games was a pain due to having to take each tile and cut it out by inserting it into the folder with the number that tiled assigned. This tutorial completely turns the table! thanks!

    • @CDcodes
      @CDcodes  3 ปีที่แล้ว +2

      Glad you found it helpful!

  • @zurrty
    @zurrty 3 ปีที่แล้ว +8

    this is the same method i was already using except i had to manually input the tile ids in the csv. glad that i dont have to rewrite the entire game... again.

  • @brianmehrman1360
    @brianmehrman1360 3 ปีที่แล้ว +4

    Great explanation of how to build a tile base map for a python game. That tile app was very helpful.

    • @CDcodes
      @CDcodes  3 ปีที่แล้ว +1

      Thank you! Tiled is great, being able to visualize your work helps a lot

  • @apalladium5k
    @apalladium5k 8 หลายเดือนก่อน

    I guess I'm a little late but this is still informative. Thank!
    Also, if you havn't used it, enumerate() makes those 'for' loops much prettier.

  • @loicharvey3946
    @loicharvey3946 2 ปีที่แล้ว +4

    everything works for me until the part where you use the spritesheet. How can I do it without the sprite sheet (im new to pygame so...) PLEASE HELP (great video btw :D)

  • @saulvilchez7031
    @saulvilchez7031 2 ปีที่แล้ว +2

    Great video, I am trying to do something similar, however I will not use the spritesheet, The problem is that it takes to long to load the game.

  • @BlueBear2000
    @BlueBear2000 3 ปีที่แล้ว +4

    Amazing video, I have a question though. When loading the tile images you say that it creates a Tile object (7:34), but my code doesn't seem to recognise that object, it simply says that "name 'Tile' is not defined". Do I need to define a Tile object elsewhere beforehand? If so, please explain how. Thanks, and again great video!
    Edit: Hold on I've found the Tile object code, should have paid more attention! Finding what I did wrong
    Edit 2: Whoops, I had Tiles named something else! Fixed it.

    • @CDcodes
      @CDcodes  3 ปีที่แล้ว +1

      Glad you were able to figure it out!

    • @milojayson2542
      @milojayson2542 3 ปีที่แล้ว

      i guess Im asking randomly but does someone know a way to get back into an instagram account?
      I somehow forgot the login password. I love any assistance you can give me!

    • @castielharvey5109
      @castielharvey5109 3 ปีที่แล้ว

      @Milo Jayson instablaster ;)

    • @milojayson2542
      @milojayson2542 3 ปีที่แล้ว

      @Castiel Harvey i really appreciate your reply. I got to the site thru google and im waiting for the hacking stuff now.
      Takes a while so I will get back to you later when my account password hopefully is recovered.

    • @milojayson2542
      @milojayson2542 3 ปีที่แล้ว

      @Castiel Harvey It did the trick and I finally got access to my account again. I am so happy!
      Thanks so much, you saved my ass !

  • @TorikoGZ
    @TorikoGZ หลายเดือนก่อน

    I got an import error: cannot import name 'Spritesheet' from 'spritesheet', also pygame has no init, QUIT and KEYDOWN, I don't know if you could help me find out why I get those

  • @raindropcomsen
    @raindropcomsen 7 หลายเดือนก่อน

    Deliciously nerdy! Tasty Py!

  • @iamgabrielsoft5891
    @iamgabrielsoft5891 2 ปีที่แล้ว +1

    I don't use python but you made it interesting, I use rust. But it's seems the same infact I use tiled

  • @eliezerabrahamontiverosoje2165
    @eliezerabrahamontiverosoje2165 3 ปีที่แล้ว +1

    Dude thanks, new suscriptor.

    • @CDcodes
      @CDcodes  3 ปีที่แล้ว

      Glad I could help!

  • @GodotEnjoyer
    @GodotEnjoyer 3 ปีที่แล้ว

    You got my like and my subscribe fairly easy!👌

    • @CDcodes
      @CDcodes  3 ปีที่แล้ว +1

      Thanks for the support : )

  • @danwalker1494
    @danwalker1494 3 ปีที่แล้ว

    I’m enjoying your videos, may I ask.....can you combine the Menu system videos with your pytmx videos so that it feels like 1 game.

    • @CDcodes
      @CDcodes  3 ปีที่แล้ว +2

      I think what i'll do is make a template game that combines all of these concepts together, and then release it with some documentation. Stay on the lookout for it.

    • @danwalker1494
      @danwalker1494 3 ปีที่แล้ว

      @@CDcodes SWEET!!!!

  • @danwalker1494
    @danwalker1494 4 ปีที่แล้ว +1

    Is there a reason you didn’t use pytmx? Also could you show how you use 2 levels. I assume it’s similar to your menu video. But i struggle with over elaborate level switches that are buggy. I’d love to see your solution.

    • @CDcodes
      @CDcodes  4 ปีที่แล้ว +4

      In short, I didn't know it existed until recently lol. I do like the simplicity of parsing the .csv file for beginners though. Its easier to inspect.
      And yes, I have gotten a multiple level system going using the framework as shown in my menu system. It may take me a while to get to a video on it, so here's the process if you want to try it yourself:
      1.Have a variable in your game class that keeps track of the current level, along with a directory that contains all the csv (or tmx if you'd like) level files. You're also going to need a reset() function. This will just reinitialize all of your variables. Place it right before you enter your main game loop.
      2. You'd want to create a new function that will look at the current level and read in the correct level file. To keep it simple you can do this using an if-elif statements if you'd like. So for example if self.level == 1: load_map(level1.csv)
      3. If the level is complete (however you implement that) increment the current level variable and exit the main game loop. You can use a menu state to show a victory screen if you'd like
      4. Now reenter the main game loop with your incremented level. In the reset function, the level will now be loaded with level 2.
      Let me know if you have any questions

  • @ajtheprogrammer6500
    @ajtheprogrammer6500 3 ปีที่แล้ว

    Excellent💯👍 explanation

  • @jamestogher1098
    @jamestogher1098 ปีที่แล้ว

    This is a good tutorial and works well for the tutorial but I'm having trouble transferring it over to a real game. When trying to implement it into my own game with a larger map and where I will need the tiles to scroll/move I don't see exactly how we are suppose to do that with this code. It looks as though all the tiles get drawn once right at the beginning and that's it. Has anyone had a similar problem and solved it?
    EDIT: I noted around 9:28 you said I would have to store them in a separate list and draw them every frame could you explain this a bit more please?

  • @servantofourlordjesuschris6456
    @servantofourlordjesuschris6456 7 หลายเดือนก่อน

    I have a question. I have like lots of different pictures or tiles that don't have names. What do I do here? in the json file, it doesn't specifically say any names about the tiles. It says something like this:
    { "columns":18,
    "image":"..\/..\/..\/..\/Library\/Mobile Documents\/com~apple~CloudDocs\/Pygame Project\/Grounds 1-100\/Block-Land-16x16\/World-Tiles.png",
    "imageheight":1392,
    "imagewidth":288,
    "margin":0,
    "name":"Mario Tileset",
    "spacing":0,
    "tilecount":1566,
    "tiledversion":"1.10.2",
    "tileheight":16,
    "tilewidth":16,
    "type":"tileset",
    "version":"1.10"
    }
    I just went to the tile set in the tile editor and exported the tile set as a json file. I don't know what to do here. Notice how each tile doesn't have a name. And even if I do have names, should I just cite like 200 of them all?
    for row in map:
    x = 0;
    for tile in row:
    if tile == '0':
    self.start_x, self.start_y = x * self.tile_size, y * self.tile_size;
    elif tile == '1':
    tiles.append(Tile('Map/World-Tiles.png', x * self.tile_size, y * self.tile_size, self.spritesheet));
    elif tile == '2':
    tiles.append(Tile('Map/World_Tiles.png', x * self.tile_size, y * self.tile_size, self.spritesheet));
    I'm confused.

  • @brhvoicu
    @brhvoicu 3 ปีที่แล้ว

    Thanks man! I Just made the map and its kinda getting late sa tomorow i am going to follow this wonderful tutorial. I am curently making a 2d game in pygame so ye

    • @CDcodes
      @CDcodes  3 ปีที่แล้ว

      Happy to help! Goodluck with your game!

    • @brhvoicu
      @brhvoicu 3 ปีที่แล้ว

      @@CDcodes Thanks! But if you have a tutorial for keybinds that will help me so much :D

  • @joewhitters800
    @joewhitters800 4 ปีที่แล้ว

    This code is amazing but have a question:
    how could I implement collisions for tiles in a selected layer (i've used your code but made a multi-layered map)
    as I want to get my character to collide with certain layers but i don't know how to make it so when it loads the tile map layer that it gives each tile a rect that the player will collide with to save time and lines of code

    • @CDcodes
      @CDcodes  4 ปีที่แล้ว +1

      Great question, hopefully I understood it correctly! Lets assume you have a background layer and then a foreground layer, with the foreground layer having the tiles you want the player to collide with.
      1) In load_tiles(), make two lists: one for background tiles, one for foreground
      2) Place the tile in the appropriate list when iterating through
      3) In load_map draw all the background tiles onto our map, and then draw the foreground tiles. So now we have two for loops
      We can now discard the background tiles list as all of those have been drawn to our game map and we don't need to worry about the player interacting with them. All the tiles in the foreground list can then be cycled through during our collision check. Each of these has their own rect thanks to the Tile() class, so when we iterate through them we will need to see if player.rect collides with tile.rect. Collisions will be detailed further in my upcoming video.
      So in short, make a list for every layer that you need and handle that list appropriately. This is how I handle objects such as enemies as well. As for exporting that in tiled, I haven't played around with the layers but imagine there's an option to export a csv for each layer? Haven't heard of any .tmx readers in pygame but they might exist. Let me know if that helped or if you have any other questions!

    • @joewhitters800
      @joewhitters800 4 ปีที่แล้ว

      @@CDcodes thx that's rly helped. tiled exports all the files as separate csv files

    • @CDcodes
      @CDcodes  4 ปีที่แล้ว

      Ok cool, you could place each layer in a folder and then load it in one csv file at a time. Let me know if you have any other questions : )

    • @joewhitters800
      @joewhitters800 4 ปีที่แล้ว

      @@CDcodes Hi again how would I go about checking the collision (sorry I haven't rly done this before on pygame the last major thing I did was an idle game) also would it be slightly different for my game as I'm doing a top down game. my guess is to check the X-position of the player hitbox against the X(top side) and x-16(bottom side) of all the tiles in the layers I need it to collide with and then once its check all of them and then the y in the same fashion then move the player back accordingly.

    • @danwalker1494
      @danwalker1494 3 ปีที่แล้ว

      You can check out kids can code, he covers a “Tiled” collision layer in his zombie game. Don’t just copy though, sometimes he catches a bug in the next video but doesn’t comment on it. Try to understand what he is doing.

  • @serratedhumor8468
    @serratedhumor8468 2 ปีที่แล้ว

    Thank you.

  • @Ed-of2id
    @Ed-of2id 4 ปีที่แล้ว +3

    WHOA

  • @vamsipreetham6087
    @vamsipreetham6087 3 ปีที่แล้ว

    I had closed the tilesets option at the bottom right by mistake in the tiled app how to get it back anyone please respond fast

  • @mtbminibomber
    @mtbminibomber 4 ปีที่แล้ว

    That’s so cool

    • @CDcodes
      @CDcodes  4 ปีที่แล้ว

      Thank you good sir

  • @kostasYuGiOh
    @kostasYuGiOh 3 ปีที่แล้ว

    do you know where i can find bricks for these pixels?

    • @CDcodes
      @CDcodes  3 ปีที่แล้ว +1

      Checkout opengameart.org/

    • @kostasYuGiOh
      @kostasYuGiOh 3 ปีที่แล้ว

      @@CDcodes thank you very much. im trying to build a game like oh mama for my university.

    • @kostasYuGiOh
      @kostasYuGiOh 3 ปีที่แล้ว

      @@CDcodes i dont know why but when i load the tile with the brick it splits the brick and i can not use whole icon to a box. can you help?

    • @CDcodes
      @CDcodes  3 ปีที่แล้ว +1

      Check the size of the brick. The game in the video assumes its a 16x16, but the brick may be larger.

    • @kostasYuGiOh
      @kostasYuGiOh 3 ปีที่แล้ว

      @@CDcodes also do you know if i can build a game like "oh mummy" with this method ? Sorry for asking but im new with the games and python and im trying to learn.

  • @thenamewhowillknockksidown7333
    @thenamewhowillknockksidown7333 10 หลายเดือนก่อน

    i didnt quite get the file name thing ,

  • @vaibhavpandey6640
    @vaibhavpandey6640 3 ปีที่แล้ว

    please make an rpg series

    • @CDcodes
      @CDcodes  3 ปีที่แล้ว

      Possibly in the future! In the meantime here's a cool battle system made by Coding with Russ: th-cam.com/video/8ZQqmvXbHCI/w-d-xo.html&ab_channel=CodingWithRuss

  • @TylerMalad
    @TylerMalad 4 ปีที่แล้ว +1

    I saw a new devlog, I click
    EDIT: Nevermind realized it's for something else haha

    • @TylerMalad
      @TylerMalad 4 ปีที่แล้ว

      Wait nevermind, I'm a minute in and I don't think it's a devlog xD

    • @CDcodes
      @CDcodes  4 ปีที่แล้ว

      Dw It's on its way : )

  • @rakotai9998
    @rakotai9998 3 ปีที่แล้ว

    whats the purpose of the spritesheet?

    • @CDcodes
      @CDcodes  3 ปีที่แล้ว +1

      Its an efficent way of getting all of the images. If you'd prefer not to use one, you could simply use the individual pngs for all of your tiles

    • @rakotai9998
      @rakotai9998 3 ปีที่แล้ว

      @@CDcodes oh i see

  • @watercat1248
    @watercat1248 4 ปีที่แล้ว +1

    is passable to do that samthing in c++

    • @CDcodes
      @CDcodes  4 ปีที่แล้ว

      Yup, check out the SDL2 library in C++

    • @watercat1248
      @watercat1248 4 ปีที่แล้ว

      ​@@CDcodes this www.libsdl.org/download-2.0.php ?

    • @CDcodes
      @CDcodes  4 ปีที่แล้ว

      You got it

    • @watercat1248
      @watercat1248 4 ปีที่แล้ว

      @@CDcodes OK thenx

    • @watercat1248
      @watercat1248 4 ปีที่แล้ว

      @@CDcodes my mestick the program I use lungege I use cs do you know haw I by able to add tilemap system for c#?

  • @SMCwasTaken
    @SMCwasTaken 11 หลายเดือนก่อน

    Hoenn, Sinnoh and Kalos music >>>>>>> Johto Music

  • @user-xc2yc3vz5e
    @user-xc2yc3vz5e 3 ปีที่แล้ว +2

    .

  • @x_fracture2936
    @x_fracture2936 3 ปีที่แล้ว

    ummmmmmmm..... where is it describes what the player is.....

    • @CDcodes
      @CDcodes  3 ปีที่แล้ว

      The player class is made in the next video