Rakit Studios

Home of Rakit Studios : Creators of Convenience Wars


2 Comments

Dealing with sprites…..for a gagillion characters!

This post won’t be to everyone’s taste, in fact there will probably be several who oust me as a rank amateur. That’s OK! I can live with that, “I think”. Truth is everyone does things their own way really and you should know that I put a lot of thought and research into the system I’ll be describing here today. Which by the way produces character sheets like the one below.

Yukito Character Sheet

Yukito Character Sheet

Recently we decided in our VN that we wanted the characters to be more dynamic. We wanted the characters and the backgrounds to feel a lot more like “TV” or even, dare I say it, an Anime! (Shock, Horror!) In light of this, we decided that we wanted the ability to have characters portrayed at three different distances from the camera. For simplicities sake, we’ll call them zo, zm, zi, for Zoom-Out, Zoom-Mid and Zoom-In respectively.

That’s all well and good, but Convenience Wars has around 20 characters. Each character “could”, but probably won’t, have 3 poses. The minor characters will probably only have 1-2, with the major characters having 2-3. There are also outfits, lets say 3 per character. Emotions? We’ll say 8 per character at the moment. Finally the three zoom levels. Do the math on that and you soon have a stupidly large number of sprite images.

There is no way on earth that we’re going to use that many sprites in the game, quite simply because there’s no way on earth we’re going to use every combination of every character, pose, emotion, outfit, and zoom. That would be insane! So I got thinking of a way to automate some of this. We have large source files for the characters, 3000×2000 pixel resolution. Due to some limitations in some of the software we use, we have a file for each pose/emotion/outfit combination. Putting these files in the game assets would be crazy. We considered going down the live crop route also. Further crazyness. So for now we have what we have.

Cropping fun!
There was no way I was going to sit there manually cropping each image for each combination. So I thought, how can I script this. What I came up with was CharBuilder. We define our images like so;

show yuk hi sc em zo

Where, ‘yuk’ is the characters name, ‘hi’ is the pose, ‘sc’ is the outfit, ’em’ is the emotion and ‘zo’ is the zoom level. Why not create something which scans the game files, searching for ‘show’ statements and collects all the unique references for which combination. We then find the source image which has no zooming on it at all, and depending on what zoom level was requested either zi,zo or zm, crop it and resize.

So how do we store that information, it’s different for every character. Each pose will be cropped slightly differenly. Enter JSON. Whilst I was thinking about this, I also decided that CharBuilder would build the character.rpy files for me. In our game we have a layout of ‘game/chars/_charname_/_charname_.rpy’ to store information about that character. I moved that specific information into a JSON file, so that now I can have defaults at the root level, which are common for all characters, and override them for the specifics.

Defaults File
{"defaults":{
"ctc":"'cw_ctc'",
"ctc_position":"'fixed'",
"what_slow_cps":"say_cts",
"what_color":"say_col",
"who_outlines":"[(1, '#ffff')]",
"what_outlines":"[(1, '#ffff', 0, 0)]"}
}

Yukito’s file
{"chardef":{
"id":"y",
"name":"Yukito"
},
"charattribs":{
"image":"'yukito'",
"color":"'#8b9502'"
},
"imageattribs":{
"hi":{
"zo":[[543, 768]],
"zm":[[303, 104], [1942, 1832], [814, 768]],
"zi":[[630, 104], [1254, 1088], [885, 768]]
},
"th":"hi"
}
}

Notice ‘hi’ under imageattribs, which is a ‘hips’ pose, contains just a width-height tuple. If no cropping is desired for that zoom level, just the width-height of the final sprite is required. However, if a crop is required, we need upper-left and size, followed by a width-height tuple. As a further optimization, you can see that the ‘th’ pose (thumbs) refers to ‘hi’. Looking at the char sheet above, you can see that the two poses, ‘hi’ and ‘th’ are identical apart from an arm movement. This being the case, the cropping will also be identical.

In the end, the script generates folders in the characters folder called, ‘zo’,’zm’,’zi’ and places the images for each zoom level under here, but only the ones that acre actually used in the game. It then also generates the characters .rpy file, an example of which follow.

define y = Character('Yukito' , color='#8b9502', image='yukito', what_slow_cps=say_cts, who_outlines=[(1, '#ffff')], ctc_position='fixed', ctc='cw_ctc', what_color=say_col, what_outlines=[(1, '#ffff', 0, 0)])

image yuk th sc sm zm = 'chars/yukito/zm/yuk_th_sc_sm.png'

With all those codes flying around, it’s kinda hard to remember what is what. That’s why the script also generates character sheets for each character, detailing ‘zi’ versions of each emotion and ‘zo’ versions of each pose and outfit.

In fact in our Git revision control system, we will now only be storing the jsons, and the source images. The character.rpy and the subsequent generated images are considered ‘buildable’. Though obviously when we release the game, we will generate them and archive them into the package.

Well, it was fun explaining this, as much for my own teams sanity as much as my own. Hope you enjoyed a little dig into how we work with our sprites.

cbx33Project Coordinator

Advertisements


Leave a comment

Convenience Wars – Update Post – Redesign of everything?

Hi guys, it’s been a long time, several months in fact. We are back! Seems that life kinda just got in the way of everything, as seems to happen. However it turned out to be a very good thing. The entire Rakit Studios team has come back together and been working hard for a week on a redesign sprint. We’re not totally finished yet, but we’re finished enough that we wanted to share a few things with you.

User Interface
One thing we hadn’t worked on at all before was the user interface. We had discussed it many times, but decided as a team that working on the content of the game was more important. However, after our hiatus, it seemed very important to us to create the look’n’feel that players would experience. Cue AliasVegas, bringing in the designing guns and firing out a fifty calibre design. We’re all totally stoked about it and it inspired us not only to rework the logo, which secretly I was the only person who seemed to like it, but to decide that we had completed our logo. The GUI was designed around being app like, bubbly and simple to use. There was a great focus on a fresh feeling. Since our VN is about two convenience stores, it sort of fit that we would go for a stylish, clean and very over produced GUI.

Take a look at some of the screenshots below:

Title Screen GUI

Title Screen GUI

In Game GUI

In Game GUI

Preferences GUI

Preferences GUI

Save Load GUI

Save Load GUI

Logo
The logo was reworked after the Main Screen had been designed by AliasVegas. The colours and feel she had chosen were worked in to the logo by cbx33 (me). I felt it was important to maintain the same look’n’feel in the logo that was present in the GUI and the team seemed to agree. After the initial logo concept, we actually went through only very minor changes. That in itself was proof to us that we had finally hit on the right logo for our VN. I’ve often found in design work, though I’m no designer, that a design is finished when you add something and decide the design is better off without it.

Logo Design

Logo Design

Characters
Though we’re only giving you a brief preview today, all of the Convenience Wars characters have undergone major redesigns. This isn’t to say the original characters were bad at all, but through the break period, AliasVegas, our Art Director, really began thinking a lot more about character design and how to make them feel more real. As we reveal more of the characters you will notice how different they are and hopefully see that we’ve dolloped an extra amount of care and attention this time around too.

Yukito Redesigned

Yukito Redesigned

CG Backgrounds
Well. What can I say here. We’ve had a huge change of direction here. I previously posted about using the Edge Detection node setup that we were using in Blender for the outlines. Turns out that during our break, Freestyle was integrated into Blender. Freestyle is a much more configurable way of introducing edge lines in Blender. I toyed with this for a few weeks, but during the sprint, we decided that we didn’t actually want to use outlines in our backgrounds at all. That was one of the biggest shifts in the design work and coupled with taking a more realistic approach, we ended up with an image which is completely different from the original.

Classroom Old

Classroom Old

Classroom Redesigned

Classroom Redesigned

We spent a large amount of time on the lighting, working on just the right setup to get the shadows plus the bloom effect on the window areas. sbx34 and I worked together for several hours producing render after render. As it turns out, the new way of rendering our scenes turns out to be a lot less compute intensive that previous, so bonus all round then! We also made the decision to upscale the game from 1280×720 to 1366×768. We did consider HD, but for this VN, we’ll be sticking to the latter. We didn’t want the possibility of the game slowing down on older machines and so decided against HD. sbx34 has been becoming very well acquainted with CG trees. We need a forest. I think he hates me.

So as you can see a very very busy time. All of the GUI work, redesigned Yukito, rendering, basically everything discussed in this post was achieved in a week. We’ve really worked flat-out and I think proven to ourselves that we definitely have what it takes to make Convenience Wars a success.

Let us know what you think – we’re gonna take a break for a few minutes

cbx33Project Coordinator


Leave a comment

Character Friday: Kurisu Yamada and Yugo Sagasu

Yay! Itโ€™s time for another Character Friday, showcasing another character from our upcoming Visual Novel, Convenience Wars. The idea is to whet your appetite and get you going all gaga over the awesome artwork that aliasvegas is producing. Today itโ€™s the turn of Kurisu Yamada and Yugo Sagasu.

Kurisu is 17 years old and Yugo is 18 years old. They both work at Yuudai-Mart along with the others. Of course, they are in love and on a day to day basis they can only be seen together, in each others arms. Most of life slips past them without even catching their attention. Being so in love, Yugo is understandably over protective of Kurisu and so he and Satoshi don’t exactly hit it off well, because of course, Satoshi is interested in Kurisu…..or at least, that’s what Yugo thinks.

Kurisu+Yugo

Thatโ€™s it for now. More details to come soon ๐Ÿ™‚


5 Comments

Community Effort: Can you spare us 5 minutes???

So, we’re making a convenience store. As with almost all convenience stores, there is a certain amount of stocking of shelves to be done. In a normal shop, that’s fairly easy. When building a shop in CG, we have to create EVERY item of stock in the store. Since crowd-sourcing seems to be the in thing right now, we thought we’d give the Convenience Wars community the chance to create some products for us. The process is reasonably simple, we’ve included the textures that we used for the various items in the store below. To design a can, simply replace the red area in the bottom left with your own colours and design. To design a box, design it within the grey area. To design a bottle replace the brown colour and design your own label. Please keep all files to 1024×1024 pixels, else this will mess with our UV mapping.

Please keep it clean, ie no swearing or inappropriate content, not too brightly coloured and do not use any images, esp logos that are already trademarked or copyrighted. As for terms, we will unfortunately not be able to pay you for your efforts, and you agree to sign the design over to us, but your name will be included in the credits for sure. Not all designs will make it in to the game, but all will be considered.

All entries will need to be in in around two weeks time to be considered for inclusion. Please email all entires to rakitstudios@googlemail.com

Thanks community!!!!

bottle2

box2

can2