KBVE / kbve

KBVE Monorepo
https://kbve.com/
12 stars 12 forks source link

[Concept] : [Unity] : Cyberpunk Roguelike Tilemap in 32x32px #3141

Open ernivani opened 1 month ago

ernivani commented 1 month ago

Core Concept/Theory
Create a 32x32px tilemap for a top-down view roguelike game set in a cyberpunk-inspired world. The tilemap should feature a low-detail, retro aesthetic reminiscent of classic arcade games. It should include various futuristic and dystopian-style weapons, such as energy blades, cybernetic implants, hacking devices, plasma guns, and traditional weapons with a sci-fi twist (e.g., electrified batons, laser swords). The overall visual style should capture the neon-lit, gritty atmosphere of cyberpunk environments while retaining a simple, pixelated design.


Alternative Ideas
The concept could be extended to include environmental elements typical of a cyberpunk setting, such as neon signs, dark alleyways, high-tech terminals, cyberpunk vehicles, and dystopian cityscapes. The game could also feature different types of augmentations or items that enhance the player's abilities, and the tilemap could reflect this by adding cyber-enhanced gear or implants.


Alternative Examples/Sources
Look to games like Ruiner or Katana Zero for inspiration on blending the cyberpunk aesthetic with pixel art. Though more modern, these games offer a strong sense of how weapons and environments can look in a futuristic, dystopian world. You can also reference elements from classic games like Syndicate (1993) or Shadowrun (SNES/Genesis) for a more old-school cyberpunk feel.


Additional Information
To maintain clarity in the game world, ensure the tile designs prioritize easily identifiable items and weapons, even at the small 32x32px size. The palette should lean into neon colors contrasted against darker backgrounds, capturing the signature cyberpunk mood. Modular designs will allow for diverse item drops and procedurally generated levels, keeping the world varied while maintaining a consistent theme.

h0lybyte commented 3 weeks ago

Okay I added tilesets to the first 3 hour meeting. Now we should have some generic tilesets in the repo before the meeting, so I will search around and see what I can find to add.

h0lybyte commented 3 weeks ago

Are the original tiles 32x32? @ernivani

h0lybyte commented 2 weeks ago

When adding in the Sprite Sheet, make sure the texture type is:

JigSawPsycho commented 2 weeks ago

After adding the Sprite Sheet as above. Ensure the Sprite Sheet is sliced properly by performing the following steps:

  1. Select the Sprite Sheet
  2. In the Inspector, select "Open Sprite Editor"
  3. Select the "Slice" dropdown in the top left
  4. Change the Type dropdown to "Grid by cell size"
  5. Change Pixel Size to 16 x 16
  6. Select "Slice"
  7. Select "Apply" on the top right of the Sprite Editor window

You can not edit multiple sprites at once this way, you have to perform this process one by one as at Unity version LTS 6000.0.26f1

JigSawPsycho commented 2 weeks ago

In order to paint the tiles from your Sprite Sheet onto your scene. You need to create a grid and tilemap in the relevant scene. I'd recommend that for your testing, you create a new scene. This can be done as follows:

  1. Right click in the "Project" window.
  2. Select Create > Scene > Scene
  3. Open your newly made Scene

Now in your Hierarchy, you should see a few gameobjects.

  1. Right click in the Hierarchy
  2. Select 2D Object > Tilemap > Rectangular
  3. Two new objects would have appeared. A "Grid" and a "Tilemap" childed to it.
  4. Select the "Tilemap"
  5. From the toolbar at the top of the Unity window, select Window > 2D > Tile Palette
  6. Dock this next to your scene view
  7. In the Tile Palette window, select "Create New Tile Palette"
  8. Click the small button with the cog and paint brush in the Tile Palette window until you can see . The hovered name will be "Toggle visibility of the Brush Inspector in the Tile Palette"
  9. You should now see the text "Drag Tile, Sprite or Texture (Sprite type) asset/s here." in the Tile Palette window
  10. Navigate to your Sprite Sheets that were set up as above, and drag and drop one of them into the Tile Palette window
  11. You can now select a tile in the Tile Palette window and 'paint' it onto the scene view (you may need to zoom in until you can see the individual tiles.
  12. You can change the active tile palette by clicking the button you clicked to create one previously. (It will now be a dropdown)

You add additional layers to the Grid by right clicking Grid and selecting 2D Object > Tilemap > Rectangular When adding a new layer, select the newly created "Tilemap" gameobject in the hierarchy and change Order in Layer to the order you want the tilemap to have. Higher means rendered more in front Ensure that when you are painting, you select the appropriate layer first by either selecting the tilemap object in the hierarchy under "Grid" or changing the target tilemap in the dropdown above the palette select dropdown

JigSawPsycho commented 2 weeks ago

Creating character from template and creating animator + animations for character

  1. Copy TemplateCharacter and TemplateAnimatorController from Assets/Sprites/Characters/Templates to Assets/Sprites/Characters/YourCharacterDir/
  2. Rename files appropriately for your character
  3. Double click your character prefab (blue box or object with .prefab in name)
  4. Select TemplateModel in the hierarchy
  5. In the Inspector, scroll down to "Animator" and drag your renamed animator controller into the "Controller" field.
  6. In the Inspector, scroll to "Sprite Renderer" and drag your character sprite into the "Sprite" field

Creating animations for your character

  1. Select TemplateModel in the hierarchy (while your character prefab is selected)
  2. In the top toolbar, select Window > Animation > Animation
  3. Click "Create New Clip"
  4. Select each individual sprite in your sprite sheet
  5. Drag and drop them all into the "Animation" timeline
  6. Double click your character's animation controller
  7. Delete the (automatically) newly made animation state from your animation controller
  8. Select one of the already present animation states (idle, dead, walking, running etc.) that match the purpose of the animation clip you just made
  9. In the Inspector, drag the animation clip into the "Motion" field
  10. Repeat steps 3 to 9 for each animation state in your characters AnimationController

In order to have your character spawn in one of the provided demo scenes:

  1. Search for and select the "LevelManager" gameobject
  2. In the Inspector, find "Level Manager", then "Instantiate Characters"
  3. Select the "Player Prefabs" dropdown
  4. Drag and drop your created character and overwrite the present character object in the "Element 0" field
  5. If you play the game, your character will now be playable
h0lybyte commented 1 week ago

https://www.youtube.com/watch?v=mv7VlbdHJws