Sci-fi cockpit demo theme

Sci-fi cockpit demo theme for 2D Kit Editor

A demo theme was created using the 2D Kit Editor software ready to show for GDC (Games Development Conference) 2016 in San Francisco. iPad and Windows tablet versions were displayed on the Marmalade exhibition stand to demonstrate features of the 2D Kit as a competitive games development UI tool.

A basic UI kit is used for the elements. The theme and its elements are also used as examples within the manual and the tutorial documentation.

Sci-fi theme UI kit

Annotated screen below for the developer, showing the features and behaviours of the themed app.

themeSpec

Below are concept sketches for the weapons in the theme. These were created in Maya and finished in Photoshop.

Sci-Fi Cockpit Weapons Concepts

weapons

 

themeOnDevices

 

 

Animated rocket ideation: sketch, sketch, sketch!

The brief was to communicate the new company marketing strategy for its software workflow Author, Deploy, Manage via the website to coincide with a major release.

This was to go on the homepage as the centre piece and incorporate the themes: 2D, 3D, games, apps, rapid deployment to multiple platforms, high performance, analytics and management.

The three stages of the software workflow being; Author which is the design and creation of a game or app,

Deploy being the use of the tool to target multiple platforms from a single codebase and Manage whereupon Cloud based services can be used to produce analytics.

I knew I wanted to use a rocket as a way of helping to communicate the themes and that it should be animated to catch people’s attention.  So I started to sketch ideas around rockets and mobile devices…

Rocket sketches

…having decided on a few Author, Deploy, Manage ideas I continue on to what the sequence should be and how to display it in browsers across devices. Some initial ideas included vertical movement…

Animated rocket vertical scrolling concept

…and others explored horizontal movement showing the rocket moving from left to right while scrolling down.

As the rocket passes, it’s jet and smoke reveal clouds and sky and a message with a call to action.

Animated rocket horizontal scroll

Another horizontal idea shown below, displays the rocket moving whilst simultaneously being reflected through various device screens showing its different positions along its motion of travel.

Rocket animated sequence concept

I like the idea of the rocket transforming from a 2D image into a 3D image as it passes through the screen.

Animated rocket 2D and 3D explorations

A completely different idea also emerges that keeps the animation more contained playing within a collection of devices.

A more detailed exploration of Author, Deploy, Manage

After discussions with stakeholders the final concept for the animation is worked up in more detail (shown below).

Animated rocket sketch final sequence

The animation is in three distinct sections. For Author a rocket blueprint appears with a launchpad (1 -2), this represents the design development and launch of a game or app whether 2D or 3D. Deploy is shown through the use of the rocket on multiple devices (3).   Manage is represented by analytical charts and diagrams (4).

rocketsketch6RefineScroll

Above (1) is a small sitemap for the desktop version of the animation and (2) a possible alternative to how it could work on mobile devices using vertical motion.

See it working here.

 

 

 

2D Kit Editor – UI design

Marmalade 2D Kit Editor UI

A contemporary UI was designed for Marmalade’s 2D Kit Editor software product. Download.

2DkitUIkit

The has a familiar look and feel and a set of features to allow designers to quickly get up and running with the software. The software has games design application features and familiar 2D design tools to create UI layouts and animations.

2DkitScreen

Sketches of the “Animation” and “Object Inspector” panels

2DkitAniPanelSketch

2Dkitsketch1

A UI document was created as a reference for stakeholders and the development team. See Part 1 and Part 2.

2DkitAssetPanel

2DkitAnimationPanelWhte