Today we continue our map maker. By the end of the screencast, we will be able to select the tileset our map uses, including variants (spring, fall, winter), we will have a base layer to allow our transparent sprites to sit on top of the correct background, and I will show you how to collapse numerous calls to useState into a single state tree (similar to redux without all the broiler-plate).

This project uses sprites from:

• https://stealthix.itch.io/rpg-nature-tileset

• Writing React without es6 classes
• useState for persistence
• React Hooks API
• react-dropdown
• require to load json
• Object.keys
• Accessing JavaScript Object data
• Array map
• Replacing all occurrences using a regexp
• Destructuring Arrays and Objects
• Inline styles in react
• Image sprites
• Form state using value and onchange
• Controlled components
• Coordinates in JavaScript X/Y
• State Getters and Setters in JavaScript
• Destructuring component props
• Positioning Overlapping Layers using CSS
• Button onClick handlers
• Individual state vs complex containers using useState
• Immutable modifications to large JavaScript objects

• Part 1 - Animating a character sprite, movement
• Part 2 - Build a Map Maker (Part 1)
• [Part 3 - THIS VIDEO | Build a Map Maker (Part 2)](TO COME)

Download the complete code from https://devmentor.live/screencasts/reactjs-based-rpg-game-part-3-map-builder-selectable-tileset-background-layer

OR

Clone the starter code (Code it yourself with the video)

git clone https://github.com/devmentorlive/react-rpg-part-3-map-maker-starter.git rpg-map-maker-3
cd rpg-map-maker-3

Happy Hacking!

• 0-start-here
• 1-selectable-tileset
• 2-fill-base-layer
• 3-single-state-tree

Learn from an expert in a fun, friendly, and affordable method.

You can get live, one on one, and affordable group mentorship sessions via zoom (a video and screensharing app) by signing up for your free JavaScript Mentorship @ devmentor.live account.

As a bonus, when you sign up, you will get a coupon for a free 1 hour group mentorship session. I teach JavaScript, ReactJS, NodeJS, Express, Ruby, Ruby on Rails, SQL, HTML, CSS, Git, and a lot more!