Collectems - Early Battle Mockups

written by lbunclejoe

Hey there, and welcome to week 3 of our Collectems development diary.



A long time ago, back when this site had different goals, every Wednesday we used to put together these silly videos where we talked about upcoming plans for all of our content. They were filled with corny jokes and stoic deliveries, but they were something we stuck to for quite some time. Even though that’s not the case anymore, we still very much like the spirit behind those old videos, and so we’ll be shooting for Wednesdays as our regular update day for this blog. The middle of the week feels like it’s the best time for us to do these anyway, since we’d be talking about these things as we’re giving them the most focus. Anyway, that’s enough about that. On to the goods!



Lately, we’ve been spending a lot of time thinking about the user interface during battles. We want the look and feel to be consistent across all platforms, and so we’re doing our best to make something that’s just as sensible to navigate with your mouse & keyboard as it is to navigate with a controller or touchscreen. Since it’s been such a focus for us as of late, we figured we’d go ahead and show off how the battle scene has evolved as our needs have changed over the course of development. (Click the images for full size versions)





Here’s the very first mockup featuring creature sprites. This was made back in 2012 when the scope was much smaller and more of a joke, which is why the interface is as simple as it is. Fun fact: the 8-way movement code from this version of the game still lives to this day!



When we started putting more focus on the project in 2013, one of the first things we talked about was wanting to feature battles with more than one Collectem. After adding some more room for us to display two sets of creature sprites, we quickly realized that we still did not have the space to properly show all of the necessary information, as evidenced by the horribly stretched text on the battle menu!



This is the mockup we’ve had featured on the Collectems website since our initial reveal. This was after we had decided on a new resolution of 320x180 to eliminate our space issues. Wanting to give the menus a little more personality (and to accommodate touch interfaces) we decided to go with larger buttons for commands instead of a simple text menu, and gave the HP meters a more detailed look. The wider display also gave us some extra space on either side of the Collectems to show the characters themselves during the fight.



This mockup was us trying to figure out how best to fill the large space at the top during wild Collectem fights with the previous mockup’s design elements. Overall, this looks a bit too empty with only one Collectem on either side, and was part of the reason we decided to change things up further.



Annnnddd here’s the design we’re currently working on right now! We’ve increased the resolution yet again, up to 480x270 (though the display resolution will be 960x540, as seen in this image). This was 100% necessary, since we weren’t accounting for potential overscan with the previous mockups. Some other changes/benefits include the new hanging-prop presentation of the GUI, new type icons for Collectems & attacks, room for more dynamic camera movement, and an increase in the size of the battle sprites from 64x64 to 80x80. In particular, having the top UI be hanging signs is great since it gives us more license to make them variable sizes, removing the issue we had with wasted space in the menu during wild battles.

Once we have this finalized and implemented, we’ll put together a video showing it all in action & detailing some other aspects of the scene (like what’s up with all of those different looking HP meters up top or those tabs on the bottom menu). We hope you’ve found this brief history entertaining, and we look forward to sharing more with you next Wednesday.



Until next time, everyone!