Skip to content

kevin192291/TypescriptZelda

Repository files navigation

⚔️ TypescriptZelda 🏰

kevin192291 Known Vulnerabilities Maintainability Test Coverage

A game that can be easly modified to be anything anyone wants it to be. Cross platform, developed using Electron and Typescript as well as ExcaliburJS.

  • 💪 Any pull requests are strongly appreciated!
  • 🆘 Please log as many bugs as possible!
  • 👻 Please share, I would like to get as many people looking as possible so this project doesn't dissapear

🕹 Controls

Move with: W(👆), A(👈), S(👇), D(👉)

🎒 Inventory:

  • ➡ Switch inventory item to the next item using the 'M' key
  • ⬅ Switch inventory item to the previous item using the 'N' key
  • ⏱ Quick select an inventory item with the number keys: 1-5

🤺 The 'Space Bar' will activate your currently selected item

🏗 Setup

Setting up is easy:

git clone https://github.com/kevin192291/typescriptZelda.git
cd typescriptZelda
npm i
npm run start

🗺 Making TileMaps

Making tile maps has been made as easy as I can make it. Designing a tile map is done with Tiled

✏️ Creating a new map

  • In Tiled, Click "File" -> "New" -> "New Map" (or CTRL+N)
  • Select a fixed file amount Width of 30 and Height of 30 is recommended.
  • IMPORTANT Change the "Save as type" dropdown to "JSON map files (.json)"
  • Add a tileset by clicking "Map" from the top menu and click "Add External Tileset..."
  • Select the .json type tileset from the tilesets folder
  • IMPORTANT The tileset image will now be displayed in Tiled's "tilesets" selection view, typically on the right, just under the tile images, click "Embed Tileset".
  • COMPLETE!

🕳 Adding a Warp Zone

A warp zone is a tile that if entered by the player, it will move the user to a new map. an example of this would be if a user steps on a door tile, the user should then be transported to the map, that would be inside the house that the door belongs to.

In Tiled, there is a "Layers" section, Click a layer (I recommend a layer called "warpZones"). On the left, there will be a Layer Properties section, at the bottom click the "+" button and add a new "String" type called "placeData". The place data should be a valid JSON string. Have a key being a string containing the X,Y coords of a tile. to get the X,Y coords of a specific tile, mouse over that tile, and get the X,Y position. Lets say tile number: 17,12 we must then multiply each number by 16 to get: 272,192 That will be our Key. Then add an object under that key using { } it must have a type, in this case, warp, and a scene that will be transitioned to. Lets say overworld2 Here is an example:

[
  {"272,192": {"type":"warp", "scene": "overworld2"}}
]

Currently the naming convention for tile maps is <number>,<number>.json. The number grid system will be what is used to navigate from one grid section to another.

🔜 Coming soon: A CLI to assite with adding:

  • Grid Sectiosn
  • Items
  • NPCs

If you need to test your JSON you can test it here Test the map by running the game, It should work succesfully.

About

A game designed by me (using graphics and sprites not designed by me) with Typescript, Electron and ExcaliburJS

Topics

Resources

License

Code of conduct

Stars

Watchers

Forks

Packages

No packages published

Contributors 5