cheekynauts
patreon
Making of: AcornEdit
🕑 Added 2019-11-19 19:26:29 +0000 UTCHallo friends, Schotti's here! In the second episode of the making of-series I will explain the creation process and features of AcornEdit, a sweet content editor designed for the Cheekynauts games.
Above: AcornEdit logo designed by Sam.
Developing an RPG with all the necessary features and frameworks is already challenging but the the real hard work starts after that: creating plenty of content. Text strings for dialogues, items, quests and so on want to be written and managed nicely. I started to organize this kind of information in JSON files but with further progress and sheer amount of data you lose the overview about it and the workflow gets cumbersome.
I decided to code a suitable editor to manage and edit new content in an easy and fast workflow, then the content can be exported into a JSON file for further use. I choose to make the editor in JavaScript using jQuery UI for interface interactions and widgets, and Electron to build an exe-file, which can load and save data on your desired hard drive location (something JavaScript was not designed for in the first place). This was definitely not the smartest tool choice I picked, but I enjoyed learning a new coding language a lot and hope that it will have some use in the future, too!
I worked on the editor from April to October 2019, making it the main focus of my gamedev endeavour in 2019. I am sure that the now faster creation of content for Santria and Moonshell Island will compensate the time put into the editor development! So let's go through the functionalities of AcornEdit!
Item Editor
The Item Editor is the first part of AcornEdit I will talk about. The input mask for the items editor has common input elements you know from HTML websites. Klangspiel helped me a lot with a short crash course about CSS, github and setting up the project structure - shout out for him! I like to use checkboxes for boolean values, making it easy to edit without a lot of typing. Input fields like Item Type or Item Quality have a drop-down menu to pick up the appropriate value quickly. It is advantageous to plan the necessary data for your items up front. Check out the screenshot to see what kind of values I like to know for every item in the database! Above: Screenshot of the item editor in AcornEdit.
Above: Screenshot of the item editor in AcornEdit.
Cutscene Editor
The Cutscene Editor is the heart piece of AcornEdit. It is inspired by the Event Editor in the RPG Maker series with some twists to work with Santria and Moonshell Island. Basically, a cutscene entry has three parts: the timer value for the cutscene controller when the entry will be executed, the scripted function what will happen, and the arguments for the function.
Above: Screenshot of the cutscene editor in AcornEdit.
You can choose the desired function by button clicking, making the workflow pointy-clicky in a wonderful manner. I like to introduce small quotes in my GUIs, because I forget things easily and enjoy the quotes over and over again with every event creation, haha!
Above: Screenshot of Create New Event dialog in AcornEdit.
After selection the function, you can insert the necessary arguments into the mask to flesh out the event and submit it into the event queue of the cutscene. Can you imagine that I had done this in JSON files manually before? I don't want to think about that anymore! The cutscene editor took the most time to create, taking all the different functions with their individual masks and the nested structures into account.
Above: Screenshot of the input mask of an exemplary event in AcornEdit.
Quest Editor
The Quest Editor is built up very similar to the Item Editor but I wanted to show a screenshot of it nevertheless because you might be interested to see what kind of key-value pairs I am saving for every quest.
Above: Screenshot of the quest editor in AcornEdit.
Localization Editor
The final editor in AcornEdit is the Localization Editor, which makes it easy to keep an overview over all text strings in the game in English and German language. We aim for these two languages in the beginning because we speak them fluently and can ensure a decent localization here without external help.
Above: Screenshot of the localization editor in AcornEdit.
That's it! If you want to write something similar in JS, check out a for you suitable Udemy course about the programming language (recommendation for other languages, too!) when a good discount is up. I like to take my time and work exclusively through an online-course before I start doing other stuff again. More advanced courses may even tackle the tasks you want to solve, giving you good hints for your own solution! After the knowledge basis is laid, you can start to code on your project and use the documentation a lot. Stack Overflow is always a good website to find frequently asked questions and suggested solutions for them.
Feel free to leave a comment and ask questions! See you next time!
Your friend,
Schotti
