Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

https://github.com/fatihturgut/react-tilemaps-examples

Examples of 2D tile maps implementation with React
https://github.com/fatihturgut/react-tilemaps-examples

2d-game 2d-tile canvas es6 examples game-development gamedev-js-tiles html5-canvas mozilla react rpg rpg-game tilemaps

Last synced: about 1 month ago
JSON representation

Examples of 2D tile maps implementation with React

Host: GitHub
URL: https://github.com/fatihturgut/react-tilemaps-examples
Owner: fatihturgut
Created: 2019-05-04T17:32:46.000Z (about 5 years ago)
Default Branch: master
Last Pushed: 2021-10-13T12:58:40.000Z (over 2 years ago)
Last Synced: 2024-02-17T12:34:40.404Z (5 months ago)
Topics: 2d-game, 2d-tile, canvas, es6, examples, game-development, gamedev-js-tiles, html5-canvas, mozilla, react, rpg, rpg-game, tilemaps
Language: JavaScript
Homepage: http://mozdevs.github.io/gamedev-js-tiles/
Size: 195 KB
Stars: 29
Watchers: 0
Forks: 2
Open Issues: 0
Metadata Files:
- Readme: README.md

Lists

my-awesome-stars - fatihturgut/react-tilemaps-examples - Examples of 2D tile maps implementation with React (JavaScript)

README

        # Tile maps examples with React

This is a collection of demos and examples on how to use and implement **tilemaps** in **React**.

![react-tilemaps](https://media.giphy.com/media/S6ksBiFYWSoPJLW48w/giphy.gif)

## Setup

- Clone this repo

  `git clone https://github.com/fatihturgut/react-tilemaps-examples.git`

## Demos

#### Square Tiles

1. [Non-scrolling tilemaps](https://github.com/fatihturgut/react-tilemaps-examples/tree/master/square/non-scrolling-tilemaps)

2. [Tilemaps with layers](https://github.com/fatihturgut/react-tilemaps-examples/tree/master/square/tilemaps-with-layers)

3. [Scrolling tilemaps](https://github.com/fatihturgut/react-tilemaps-examples/tree/master/square/scrolling-tilemaps)

4. [Collisions in tilemaps](https://github.com/fatihturgut/react-tilemaps-examples/tree/master/square/collisions-in-tilemaps)

#### Performance improvements

1. [Offcanvas drawing](https://github.com/fatihturgut/react-tilemaps-examples/tree/master/performance/offcanvas-drawing)

## References

1. [Mozilla Tilemaps Examples](http://mozdevs.github.io/gamedev-js-tiles/)

2. [Mozilla Articles about Tiles and tilemaps overview](https://developer.mozilla.org/en-US/docs/Games/Techniques/Tilemaps)