Kids RPG Journal – #58 Optimizing for Print

Instead of curling up with the iPad and doodling monsters and enjoying the latest season of Stranger Things, I went down the coding rabbit hole and optimized the Harrowlands website for mobile and print. This cleanup has been on my list of things to do ever since I started building the site and my initial attempts were inconsistent.

This time, I went into the CSS (cascading style sheets) and stripped out everything that was not necessary or responsive. I won’t go into the technical CSS  in-depth here, because this is meant to be more about my process as a gamer, not a developer, so I’m going to focus on my goals and what I accomplished.

Since Harrowlands is primarily a resource for me to use for my games with the kids, I wanted it to be flexible as possible. I primarily access it using the laptop or the iPad Pro, which is what I originally built the site out using, but I sometimes like to check resources on my phone, and I definitely want to be able to print out things like monster and character sheets, because in the end I am a big pen and paper guy.

For this post, I am showing screen shots of http://harrowlands.com/monster/ghoul.

screenshot of harrowlands ghoul monster page (desktop)

The aforementioned character and monster sheets are definitely the most complicated portions of the site (everything else is pretty bare-bones basic) and these are the ones I most want to be perfect in all formats.

Both have a top section and a bottom section split by the keywords. Each of these sections needed to be be flexible with the components within, expanding and contracting based on the device or format. Everything is based on viewport units, which adjust elements based on the width of the screen. At first, I thought I had to have the printed version in all static units (pixels), but other than maintaining heights or certain components, I did away with pixels completely.

For mobile, every component within each section needed to fit across the screen and be arranged in a column for scrolling.

screenshot of harrowlands ghoul monster page (mobile)

For print, the importance was to try to fit everything on a single printed page while maintaining the essential desktop layout.

screenshot of harrowlands ghoul monster page (print preview)

This will give me a lot more flexibility when creating new monsters because I can easily look something up when I have an idea and I can easily print out any monsters and characters I want to use in the game or want to scribble notes on their sheets for revisions and additions.

printed version of ghoul monster sheet

Kids RPG Journal – #46 Character Sheets

I finally designed character sheets and monster sheets that I am happy with. It includes seven sections to help me role-play the characters from one sheet.

  • Profile: the character’s name, overall concept, and portrait
  • Role-Playing: the character’s motivation, appearance, voice and mannerisms
  • Keywords: Just a list of keywords to keep in mind while playing the character
  • Health
  • Custom Moves: key actions the character can take
  • Gear: anything cool that they carry on their persons
  • Thoughts: Short quotes in the character’s voice about key topics

The format will allow me to quickly scan things at a glance, so I don’t miss a key characterization and focuses on creating a compelling and memorable character. Now that the design was completed, all I had to do was create a sheet for all of my NPCs (non-player characters).

The main problem with designing my various game materials with Clip Studio on the iPad is that adding and updating text is kind of a pain. The popup keyboard takes half of the screen and maintaining font styles can be inconsistent. I wanted to find a better flow for the kind of sheets I plan on putting out with lots of text and styles.

crowded view on Clip Studio Paint for iPad when editing text

To test things out, I built out a NPC sheet in Affinity Publisher to see if I could get something that would be easy to templatize and make multiple characters with minimal design work (outside of the character portrait). The template was more manageable than Clip Studio, but I still had to manually click into each field to update content and that would get tedious pretty quick.

affinity publisher character sheet template

Publisher, Affinity’s competitor to InDesign, is still in beta and does not have the full range of features that it will hopefully have later on. One bit of functionality that InDesign has that Publisher is currently lacking is the ability to import data into a template. 

Unfortunately, this was kind of a deal breaker for me. And I’m not about to go back to Adobe’s products.

I work with lots of data in my day job and I enjoy building out data systems. I knew if I could find some way store data and import it into   a template without messing with design, I would have an ideal setup.

So I went back to the drawing board and back to my comfort zone, building it in HTML. I created all of the data tables and input a good chunk of content into the database, so I could test out the template and started building the web pages. This wasn’t a small task and I’ve spent about three weeks putting everything together.

harrowlands.com character web page - plunk

And I’m finally finished with the basic template for NPCs on the upcoming Harrowlands website. The three characters I have completed are:

Plunk

Momma Yrla

Gurla

Having everything online and in a database has many benefits: I can access with any device, everything is easily indexed, and of course the more content I can put online, the better the search rankings become. And most importantly, I am getting started on building the knowledge base for the Harrowlands game.

The one place this is lacking is when I want to have a copy of the sheet in hand.

Which is why one of my next steps is to edit the print CSS styles to give me the ability to print a single page directly from the browser. It may lack a little of the nuance of a custom designed sheet in a graphics program, but I won’t need things to be super pretty for games. Besides, I’m confident I can get the stylesheets to print out something quite nice.

Kids RPG Journal – #44 Exploring Publisher

For a number of reasons, I haven’t been able to work on the Harrowlands game much over the last week or so and I feel like I’m falling behind a bit. We have a game scheduled for this Saturday and I won’t have a whole lot of extra prep done. One thing I have been working on is designing the sheets for the NPCs (non-player characters). These are primarily focused on how to role-play and not on combat, but I’ll go over that in a later post.

While I would normally have made the NPC sheets using Clip Studio Paint, I wanted to make them so I could more easily swap out text and assets. Instead, I took the time to wrap my head around the Affinity Publisher beta, which I hope will take the place of InDesign for any publishing needs.

I’ve been using InDesign since the PageMaker days, and it is the last Adobe product I still use on my personal computer.

Last night, I was toying around with how to get text to wrap around an image in Publisher. I wanted to be able to place a small image next to a quote the NPC would give about it, but wanted it to wrap fairly tightly around to be mindful of page space.

First, I created a block of text with the Frame Text Tool. To have an image the size I wanted, I used the Image Frame Tool to get the size and then populated it with the Place Image Tool. It took me a little toying around to figure out how to adjust the image size and placement within the frame. The method I ended up preferring was to select the image within the frame from the Layers panel and then using the Move tool to adjust it.

Affinity Publisher: selecting the image in the Layers panel.

I had my image on top of the text, but it was falling behind the image in the frame. I tried adjusting the frame shape on the text, but that wasn’t giving me the results I wanted, so then I switched over to the image and found the Show Text Wrap Settings at the top of the screen.

Affinity Publisher: text falling behind the image

I set the Wrap Style to tight and adjusted the Distance From Text boxes until I had the look I wanted.

Affinity Publisher: text wrap settings panel

Now the text wraps nicely automatically and when I swap out the image or text for other NPCs, I won’t have to do any additional adjustments.

Affinity Publisher: text now wrapping around the images

Kids RPG Journal – #14 Software

Today, I am going to take brief detour from the active kids RPG project to go over the digital tools I am using to create everything. I wanted to do this now, as I’m starting in on Affinity Publisher for the first time to make the character sheet, and there’s a slight learning curve I’m going through to develop a process.

The following programs are all great, and I enthusiastically endorse them. Each has significantly improved my workflow and creative processes, or will in the near future.

scrivener, clip studio, affinity designer, photo, and publisher

Writing – Scrivener

I switched over to Scrivener as my default writing and note-taking application a couple of years back and it is phenomenal. It allows you the ultimate flexibility in organizing your documents and document snippets all in a single project. I have a general Daily Writing project for each year, but I’ve also used it for technical specs, comic scripting, website content, adventure design, monster/folklore notes, and book scripts.

https://www.literatureandlatte.com/scrivener/overview

Illustration – Clip Studio Paint

For digital illustration, I use Clip Studio Paint almost exclusively. I started out doing digital art with Illustrator and then later with Photoshop and used those exclusively for many years, but I have slowly been moving away from the Adobe products where I can. Clip Studio is a dream to draw in and feels the most intuitive out of all the software programs that I have tried, particularly using the Frenden brushes available for it (http://store.frenden.com/). It is the program that closest resembles my traditional workflow. I love having the ability to seamlessly go from red pencil sketches, to inking, to coloring all together, and then on top of it having robust vector, comic panels, text and word balloons. It really is a complete package.

The only thing I find lacking are the export options. If it had the ability to export vector layers to SVG, it would cover practically all of my digital art needs.

Yet what truly makes Clip Studio mind-blowing is that the iPad version of the application is identical to the desktop, so I can do 99% of my work anywhere and sync with Dropbox to have the fully compatible file on my desktop. Well worth the price of the subscription. The only issues I have with the app for iPad are all based on iOS issues and the hoops one has to go through to access files and assets with various applications.

https://www.clipstudio.net/en

Digital Art Assets – Affinity Designer & Affinity Photo

While I don’t draw with the affinity applications, I do appreciate them for their completeness and flexibility. I have completely dropped Illustrator and Photoshop in favor of Affinity as I can do everything I ever did on those programs without maxing out my CPU, paying subscriptions, random crashes, and all the other headaches that came with Adobe.

Any vector work I need to do is in Designer. I’ve gotten quite comfortable with creating with the pen tool and that tends to be the majority of my work there, unless I have some typography I need to create outlines with. For Photo, I use it mainly to crop images and create digital assets.

I don’t use most of the features available in Affinity on a regular basis, but they are great to have around when I do and the price for the level of polish and quality is unbeatable.

While I do have both applications for the iPad, I tend to do all my work in them on the desktop, so I can’t really speak to those versions.

https://affinity.serif.com/en-us/

Document Layout – Affinity Publisher

This is the program I’ve been waiting for for two plus years, but the beta for Affinity Publisher is finally out! InDesign was the last holdout of the Adobe products, and after a couple of hours with Publisher, I can say that I will be 100% done with Adobe for my personal projects (I still use the programs for the day-job). As much as I love with InDesign, so far Publisher has either matched or exceeded it in every aspect of laying out my character sheets. The text is very quick and intuitive to fine-tune, I haven’t had any trouble placing and altering images, and my test exports seem to work very well.

I’m excited to see what I can accomplish with the beta and when the real release comes out. I’m sure I’ll be putting a bunch of things here as I start building the adventure and various handouts, monster sheets, etc. I’ll document the process as I learn.

https://affinity.serif.com/en-us/publisher/

At a later date, I’ll talk about the hardware I use for various related projects and how those affect my workflow. Today I’m going to continue to lay out the character sheets for the boys and see how far I get with them.