EPT
![[image loading]](http://www.joshuakeyes.us/wordpress/raihn/images/BaseTradeTVReflection_3D5B/BaseTradeVs_thumb.png)
December of last year I had an encounter with a Starcraft 2 community stream on Twtich.tv that I really enjoyed. Their obvious passion and dedication purely to the community of gamers was inspiring. I felt this could be a nice avenue that would allow me to stretch a little and focus on quick creative execution of some small projects. I contacted BaseTradeTV and offered some graphics support for the channel, they accepted.
The Overlay
I proceeded to create a modular overlay set for them to use for a number of different streaming situations. This would allow the addition or removal of webcams, sponsors, score screens, promotional banners, and rolling text updates. This would give the channel maximum flexibility while retaining a familiar aesthetic.
![[image loading]](http://www.joshuakeyes.us/wordpress/raihn/images/BaseTradeTVReflection_3D5B/OverlayDraft01_AdOns_02_thumb.png)
A Demo of the basic overlay design
The design was enjoyable to work on and didn’t take terribly long, around six hours or so, I believe. I tried to focus on the concept of “completion”, where the observer will complete the shapes in their mind that aren’t actually fully rendered. The heavy shadows allow a lot of interest to stem from the imagination of the viewer. This also helps the modules to better interconnect in a flexible ambiguous way.
First Blood
BaseTrade was known for a common tradition of playing a ‘First Blood’ sound along with flashing a red screen when the first unit in the game parishes. I contributed an emote icon for Twitch so players could join in the callout of the First Blood ritual. As well, I created a slicker flash screen to go along with the famed sound effect.
![[image loading]](http://www.joshuakeyes.us/wordpress/raihn/images/BaseTradeTVReflection_3D5B/FirstBloodDraftDemo_01_thumb.png)
First Blood Scene that fades in and out very quickly
![[image loading]](http://www.joshuakeyes.us/wordpress/raihn/images/BaseTradeTVReflection_3D5B/knifeB_112x112_thumb.png)
Gorilla Grouch
BaseTrade’s original mascot seemed to be a gorilla, I created a substantial amount of content and concepts that could utilize this theme, though many of them never panned out as the direction of the stream veered away from the concept.
![[image loading]](http://www.joshuakeyes.us/wordpress/raihn/images/BaseTradeTVReflection_3D5B/BaseTradeIcon_draft01_thumb.png)
![[image loading]](http://www.joshuakeyes.us/wordpress/raihn/images/BaseTradeTVReflection_3D5B/BaseTradeIcon_draft03_thumb.png)
![[image loading]](http://www.joshuakeyes.us/wordpress/raihn/images/BaseTradeTVReflection_3D5B/BaseTradeIcon_draft04_thumb.png)
![[image loading]](http://www.joshuakeyes.us/wordpress/raihn/images/BaseTradeTVReflection_3D5B/BaseTradeIcon_draft05_thumb.png)
![[image loading]](http://www.joshuakeyes.us/wordpress/raihn/images/BaseTradeTVReflection_3D5B/BaseTradeIcon_draft07_thumb.png)
![[image loading]](http://www.joshuakeyes.us/wordpress/raihn/images/BaseTradeTVReflection_3D5B/BaseTradeIcon_draft08_thumb.png)
![[image loading]](http://www.joshuakeyes.us/wordpress/raihn/images/BaseTradeTVReflection_3D5B/BaseTradeIcon_draft09_thumb.png)
![[image loading]](http://www.joshuakeyes.us/wordpress/raihn/images/BaseTradeTVReflection_3D5B/BaseTradeIcon_draft10_thumb.png)
![[image loading]](http://www.joshuakeyes.us/wordpress/raihn/images/BaseTradeTVReflection_3D5B/BaseTradeIcon_draft11_thumb.png)
Emote Icon Drafts
![[image loading]](http://www.joshuakeyes.us/wordpress/raihn/images/BaseTradeTVReflection_3D5B/BaseTradeIcon_draft12_thumb.png)
aceGormad
The Mad Gorilla was added the the channel’s emoticon list. Though he doesn’t get much attention, he is my favorite Twitch emote to show off around other channels.
![[image loading]](http://www.joshuakeyes.us/wordpress/raihn/images/BaseTradeTVReflection_3D5B/GormadCheer_thumb.gif)
Angry Gorilla!
![[image loading]](http://www.joshuakeyes.us/wordpress/raihn/images/BaseTradeTVReflection_3D5B/BaseTradeTV_Gormad_demo03_thumb.png)
Twitter Splash concept for introducing players
I designed this and a number of other odd splash screens that might have been a cool way to introduce players and give them some exposure for their twitter feed. Though the execution is a bit muddy here, I still think this is the wave of the future. In game animations could be set so that casters could press an ‘introduction’ button over a player and it would spawn the appropriate sponsors, Twitter, and player name.
![[image loading]](http://www.joshuakeyes.us/wordpress/raihn/images/BaseTradeTVReflection_3D5B/bannerMoneySpeaks_thumb.png)
A banner I created for an event the channel was putting on for the community.
Banner
Banners like the Money Speaks above example I created for BaseTrade are great exercises in creating an entire thematic design. From this small banner one could create an entire web layout. Finding connections between real world and in game concepts has always been something I enjoy exploring. Exhibited are resources from the game merged with a fun printed future real life cash resource theme.
In respect to future application I learned a lot about designing and implementing screen assets that rely heavily on alpha effects and fading with simple layer tricks. All of the assets I created I did so keeping in mind how I could learn from the experience and apply the a greater level of skill and experience to my game development team.
Game Dev Applications
Overlay: Some assets could be repurposed for level concepts in my game. The specific exploration of fading structure into shadow will pay off as we push forward with new designs. This concept is used heavily in our 2d terrain philosophy. Some of the elements could inspire UI elements of our game, as well.
First Blood Effect: Something like this is a low production value, but effective way for the player to feel the impact of big hits. a quick flash of a similar screen might let the player know they took a substantial amount of damage. Another fun adaptation would be using the flash of ‘pain’ screen as an identifier for status effects. For instance, if you get hit by a slowing frost effect we could have a screen flash in with a frosty window feel.
Emoticons: These are always good practice for conveying ideas in very small pixel space. In our indie game this could take the form of icons, power ups, hints, or buttons.
Gorilla Animation: This animation could be adapted to be a fully realized character in our game. I could give the guy some armor and a weapon, or steel arcane powered fists and he’d quickly find himself at home in Mecromage’s realm.
Twitter Splash: The way I put together the twitter icon would be awesome to accentuate a temporary power up. Flashing it in, then fading something like this out, could be a really awesome way to communicate a mode change to the player. I may consider this effect for our Utility Swaps, to ensure the player realizes what play mode they’ve swapped into. I can imagine the motion for the graphic quickly scaling up from the center of the player, fixing at a certain size, and then quickly fading away.
Banner: Always good to have some practice with creating assets like these. A couple well placed banners on our Mecromage website or on in a Kickstarter can go a long way in convincing a complete stranger of our legitimacy and dedication to a quality product.
Thanks for your interest on my reflection on the work I’ve done for BaseTrade TV. Feel free to comment, ask any questions, or contact me and I will do my best to respond.
Peace,
@RaihnAzure
