Next.js Level Editor - React Tutorial Series

You need serious tools to build a large game.

Sometimes, pre-built tools will work great out of the box... at least at first. As your project grows in features and complexity, you might quickly outgrow out-of-the-box applications. They are unlikely designed for exactly what you are trying to do. You'll likely want something very custom for your game's needs.

In this series, I'm going to show you how to build a Next.js based tool to author content matching the exact format your game wants to receive. It's a great fit when working with a game engine that doesn't ship with an editor. Here's a video with all the details:

We'll configure this application to produce JSON that can be read by any game engine or web framework. You'll be able to change the JSON output to match whatever kind of shape and format your game is expecting. This is the exact methodology I use in all of my JavaScript based long-form RPG games.

This series is all about quickly spinning up a custom editor application for your 2D pixel art game, but it's also a great way to get more experience with building full applications in React and Next.js. That's the kind of stuff that looks really great on your resume these days.

For more context around how and why I like building custom editors, check out my YouTube video about this topic.

FAQ

Which version of Next.js is used?

14.x. That's the latest at the time of this recording.

What if I've never used Next.js before?

Don't worry - this series assumes you are new to Next.js. It's a good idea to have experience with installing NPM packages (and maybe a little bit of familiarity with React basics) but you don't need much experience beyond that.

What features of Next.js and React do we use?

Server functions, the App Router, and various strategies for managing React components.

We'll also integrate React with HTML Canvas, which can sometimes be tricky.

Why not use a prebuilt tool like [insert tool name here]?

There's nothing wrong with prebuilt tools. I've found myself trying many of them but never being totally satisfied with the output, especially for very deep RPG games. Sometimes I wish the editor worked just a little bit differently to match my exact needs.

That's why I tend to reach for my own tools. It takes more time up front, but will pay off in the long term of managing your game for years. (Even after release)

What other topics do we cover?

Tile set creation, Canvas operations, creating JSON import and export

What if I get stuck?

You can reach out to me anytime! Consider joining the Game Dev Shift Discord server where you can bounce ideas off of other JavaScript savvy game developers.

Full Video List

01. Repo Setup (01:46)

02. Basic Routing (07:53)

03. App Layout (15:30)

04. Loading Tilesets (13:52)

05. Tileset Sidebar (13:17)

06. Selecting Tiles (21:15)

07. Painting Tiles I (26:35)

08. Painting Tiles II (11:44)

09. Layered Tiles (06:42)

10. Visible Layer UI (24:00)

11. Loading Map JSON (12:41)

12. Saving Map JSON (21:18)

13. Exporting Map Images (15:33)

14. Solid Wall Tiles (08:10)

15. Listing All Maps (06:54)

16. Object Placements (18:58)

17. Object Inspector (16:32)

18. Adding Objects (06:28)

19. Object Output (08:35)