MyTear CL – behind the scenes [part 1]

I’ve recently worked on a pretty interesting project and thought perhaps I could share some of the processes.

Before I continue, a slight digression, I need to outline these 3 important components that in every digital creative production must have, which are time, scalability, and optimisation. I will explain those components succinctly.

Time
Time is money, in a simplified instance perhaps it can be explained if you had project A, then you need to consider the production cost, for an agency it can be salaries, operational costs, tax, etc. and lastly you need a bit of margin to keep you cash-flow positive or perhaps for any miscalculation that may happen, so ultimately the shorter the time you spend on your production the more efficient the cost will be.
Although in can get complicated since shorter time means lower quality and in a competitive environment this will affect your business, and if I might add this condition does not apply, but I will reserve that discussion for another time.

Scalability
Idea and creativity are malleable, if you were working with complicated projects or difficult clients, the approval process can be a bit tedious or bureaucratic.
There ways to approach this systematically, one of which is managing the client expectations or using the design sprint methodology, but the least minimum approach is having a framework that can scale or reusable.

Optimisation
Optimisation is a hard thing to achieve, even large tech companies often had catastrophes and in digital agencies, you certainly cannot dedicate your undivided attention to the matter, but at the least is to have the minimum viable product.

But what is minimum can be a fickle thing, this will dependent on the product. A website and live installation projects will have different priorities, even certain client expectation can also become a factor.


Since now we have a clear topic confinement, let’s continue.

What’s the Concept
In short, it’s an online game site, where the goal is to find the hidden protagonist, sort of like Where’s Wally, and they can interact with the game by swiping or using the device orientation.

There’ll be several scenes variations where she’ll be hidden.

Production Flow
Let’s start with the production flow, have a look at the diagram below;

Building the Stage
The focal point is the stage, any changes to it will mostly affect the site, it needs a system where the it can be designed and modified in an instant.

Fortunately, Photoshop has script functionality plus (I’ve posted a blog a long time ago) the designer can use it with ease, now have a look at the diagram below.

This how the layers are laid out, the pink circles are the character or clickable object and cuts are the map, once the images have been exported the subsequent steps is to extract its information into the following JSON.

{
	"document": {
		"width": 11438,
		"height": 2048
	},
	"layers": {
		"miss_09_s_1": {
			"x": 10123,
			"y": 1569,
			"width": 10208,
			"height": 1711
		},
		"miss_09_s_2": {
			"x": 10149,
			"y": 1569,
			"width": 10238,
			"height": 1711
		},
		"success_01_s_1": {
			"x": 5608,
			"y": 1362,
			"width": 5718,
			"height": 1487
		},
		"success_01_s_2": {
			"x": 5608,
			"y": 1367,
			"width": 5702,
			"height": 1487
		},
		"map02": {
			"x": 4096,
			"y": 0,
			"width": 6144,
			"height": 2048
		},
		"map01": {
			"x": 2048,
			"y": 0,
			"width": 4096,
			"height": 2048
		},
		"map00": {
			"x": 0,
			"y": 0,
			"width": 2048,
			"height": 2048
		}
	}
}

The “document” key holds the entire stage dimensions, the “layers” key holds the graphic components information, this will then be processed and calculated in Javascript.

Consolidating the Assets
The last point is to consolidate all assets into one giant JSON, the purpose of this step is simply asset management and convenience, each asset will be loaded and utilized according to its purpose.

For instance, stage A will consist of certain images or audio that aren’t included on another stage.

I think that’s it for part 1, thank you for reading.

Leave a Reply

Your email address will not be published. Required fields are marked *