Video of the Interactive piece

Interactive piece

Finally, I have finished up all the necessities and put it as a video file.
There's another video uploaded in Vimeo: https://vimeo.com/126495876

This was rather a challenging but also interesting and very helpful. I was more focused on 2D art but haven't really tried in Isometric way. This was all a new experience for me, such as drawing in isometric (environment, character etc) but with this difficulties, I have gained how to draw in isometric way in further depth. Challenges and experiences are great way to understand and gain skills when you haven't tried it before.

Flash coding

Coding in Adobe Flash

This is the first iteration of coding which will be used for character to move. This is all a new experience for me since I am not knowledgeable at coding + I had absolutely no idea how to even move characters in isometric way. There wasn't much of a choice for me except moving character by mouse clicking.

Later on, these are few of the major coding which have been used to create this interactive piece.

//Variables
var targetPos:Point;
var charSpeed : Number = 7;
var clickedPickup : Boolean = false;
var clickedPickupName : String = "";
var onArrivedAtPickupFunction:Function = null;
var soundChannel : SoundChannel = new SoundChannel();
var soundClip : Sound = new bkgmus();
var currScene :int  = 1;
soundChannel = soundClip.play(0,99999);

stop();

SetupScene();

function SetupScene()
{
HideMsg(null);
SetupTransitionButton();
SetupClickingOnPickup();
SetupCharacterMovement();
FindAllPickups();

}

Variables for every single objects and functions for each scenes. This was rather challenging but with few helps in the internet and other people's opinions, I have been able to finish coding without any errors.

Music choices

For music choice, I chose a music (royalty free) with ambient feeling to it and I thought it would match up with the theme I am going for this interactive piece. After implementing this music into the flash file and tested it, it worked perfectly and it does have the feeling what I wanted to show.

Background Didgeridoo Ambient Music | Royalty Free

https://www.youtube.com/watch?v=bTRHYcodVNs

Getting the Interaction (2)

Interaction

Third scene interaction practice

Fourth/last scene interaction practice.

All these interactions are very similar due to lack of knowledge in coding area in Adobe Flash but what it matters to me the most is the quality of the art, thus most of interactions are 

1. Characters moving in certain areas

2. Clicking certain objects to go into another frame.

3. Another object which will go into other scenes.

Getting the interaction (1)

Interaction

After creating most of the assets, it's time to implement it in the Adobe Flash. First is to draw out how the interaction will work and where the character will move, where the object will be etc.

Second scene interaction practice.

Environment paintings (2)

Environment painting (continuation)

Third scene/environment painting

Concept work of the interior

Final version of the interior design.

There were improvement in the house (detailing in more details) and for the last interior painting, this was rather difficult since I needed to change most of the assets I had (new ground tiles, portraits and paintings on the right side etc). However, it is important to have different scenes rather than sticking to same scenes over and over again, which will make players rather bored of this piece,

Environment paintings (1)

Environment paintings

This painting is the main background which will be implemented in each scene to give dreamy & kind of vortex feeling where it seize the attention. Unfortunately, the middle part will be covered with other environment arts which will be on top of the main background painting. However, it is a good practice and still be able to use it in the interactive piece.

The first scene environment painting

Second scene environment painting

I'm trying to put different types of objects in each scene so it won't be dull or boring for players to play this piece, for example, first scene will have bunch of street lights and second scene will have fountain in the middle of the path etc.

Character choices & works

Character choices and iterations.

This character concept design is to represent the lying down/badly injured version of Dr Jekyll to grasped the attention of audiences 'why is he lying down with puddle of blood?'

This will be the character which the player can move it by clicking the mouse button within the walk-mask/ground tile so they wouldn't just wonder around the entire background painting. This character is the representation of the soul (probably from Dr Jekyll) with no memories.

Bunch of different colours for the character to see which one fits the most + different shapes as well (some are think and some are thin etc).

Start creating assets (5)

These are the concept arts of the isometric interactive piece I am thinking of creating. 

First iteration of the isometric background. I just wanted to progress as much as possible so later in the future, I just need to make few adjustments and adding few more assets to make this piece more artistic.

Concept work of interior of the house which the character will go inside and roam around to find his objective(s). It is at a very simple stage, only done by black and white but just to get the feeling how it might turn out later on.

Also, decoration for the wall inside of the house is also necessary and these paintings are some of the assets which I have created to see if it fits the victorian era of paintings

Start creating assets (4)

Also, if there is going to be an interaction, which I have made some concept arts for it (bits/drops of blood) I need to think what will happen after the interaction. What I was thinking the most was to create some sort of chat box with character and text explaining the situation.

First iteration of the chat box

After the first iteration, obviously, changes were needed to make it visually more distinct.

This is a button when the player clicks, the chat box disappears and moving on to the main interaction.

Start creating assets (3)

 Since it is going to be an interactive piece, there needs to be an interaction during the play. So, in my opinion, since I chose The strange case of Dr Jekyll & Mr Hyde, it might be more subtle if I add horror genre into this interactive piece, for example, drops of blood.

Start creating assets (2)

 After creating first asset, ground tiles, it was time to make some other assets. For example, since the book I have chosen is 'The strange case of Dr Jekyll & Mr Hyde', it should have some similarities of Victorian era (1837 - 1901)

This process seems fairly similar to one of the other module I'm currently doing which is making enormous amount of assets except this time, it needs to be created all in isometric way.

Start creating assets (1)

 First of all, what I needed the most to create Isometric interactive piece was to make ground tiles, where character can walk around. This is all a new experience for me to make isometric art assets which I have never done before (focused more into 2D aspect of environment and character painting.)

Despite the fact being new to this case, it is still a learning process and have been able to find some great sources which I can use it to produce this ground tile assets. 

First asset is for the ground tiles where character will be able to move and the second assets is just each different assets for ground tiles (rather than making 1 asset which will be rather plain) and combine it together in unorthodox way.

The last two assets are to put it in the background to make it seems the ground tiles are falling down beneath the ground.

Moodboard

 Moodboard for Jekyll & Hyde

Just trying to get the idea what kind of game it will be. First of all, I get the idea of how the interactive piece will turn out since I have few experiences playing isometric game but mixing it with one of famous book, Jekyll & Hyde, is rather challenging.

So turns out, gathering ideas and doing some paintings were extremely helpful to know how my piece will turn out.

• Ground tiles
• Character
• Background images

Close up image

Book - The Strange case of Dr.Jekyll & Mr.Hyde

The strange case of Dr.Jekyll & Mr Hyde

- Written By Robert Louis Steveson

- A case of strange occurrences between Dr Jekyll and his another alternate character, Edward Hyde.

All these images/references to give an idea what kind of interactive piece I can come up with. Maybe there is an idea to use Jekyll's another personality, Hyde, to create some sort of horror scenes. His completely different personality will torn the humanity apart and Jekyll couldn't take anymore of what Hyde does when he loses control.