Dev Diary - Comics World: Spies in Trouble

Hello Guys,

I am starting this DEV Diary so I may be able to track down all development that is being done for my game.
I hope this DEV Diary helps someone, as I am planning to report all the issues that I did face or
will face soon. And obviously it's workaround.

That way I may help someone who need a specific behavior or code that I may already have done.
In short words: I want to share / trade knowledge.
Doing that, in my opinion,  everyone - including me - may take advantage of other developer's knowledge.

Also I am willing to make it as much detailed as possible. Stating all difficulties and joys
of making a game all by myself.

This Dev Diary will not be only a technical one, but also an artistic one.

Objective: Trade ideas, share knowledge.

Hope this idea keeps going on.
And if this is not the correct area of the forum, please do tell me, so I may request the moderators to move it to the correct one.

INDEX:

Page 1
Intro - The Start
Art Tip - Light Effect
The importance of paper and pen
Surveillance Camera Behavior

Page 2 and 3
Walking Sprites / Frames

Page 3 and 4
Images size, Scale and mobile adjustments

Page 4
Framerate Performance Tweak (Image loop)

Page 4 and 5
Progress Bar / Health Bar

Page 6 and 7
Scale issue using Stencyl 2.2 and solved on Stencyl 3.0

Page 9 and 10
Using Esoteric's Spine Software to enhance the animation

The start - Developing the idea:

Let me first try to explain to you guys how I got the urge to create a new game.

I have to state that I am 36 years old and I did start playing games on an Atari 2600 system,
so, you do realize that I do have a quite wide background on games.

But enough on my background...

I was looking for a way to use my developer skills (java programmer since 2001) in
a way to earn money. Trying to think in an application idea for iPhone / ipad.
I think everyone has been there. AS it seems like a pot of gold.

But I couldn't think on anything new or groundbreaking. And that idea didnt go foward.

One day I had the idea to install Tiny Wings on my iPhone. A great game.
Playing it made me thought with myself: "Man, that's quite a simple game! But wonderfully done!".
And I did look for its earnings... 6.000.000 sellings on the first months.
UOAAAA!!! What a hit!

Then I did read an interview with its creator, who said a fantastic statement:
He did want to create something that was not violent. A game that was different from others.
He did want to translate his early dreams of flying into a game.

That was genius!!!

But still no idea for me.

I was obsessed with that:
A new idea. Something that was never done. Something new. O at least a mix of things that
will make my game something that can be called original.

One idea came to my mind. A fantasy platform game. Something that would resemble Castle of Illusion.
I know, doesn't seems that original / new. But trust me, my idea kind of was.

As I did start to develop, I started taking notes on everything. Created a Script Document that had
all ideas and "to-do" of that game.

Then... BAM... all changed. I did spend two weeks on that fantasy platform game to then start a new
one. The one I am working right now and almost launching a demo.
I kept all writings for the first one aside to work later on. And started developing the new one.
It will be a mix of game styles. A platform / stealth / puzzle game / action game.

And on all this time that I spent on those games I came up to realize a few important things on
this process (game idea):

1 - Keep a pen and a notebook always on hand.
    Write everything that comes to mind. Don't let an idea go away.
2 - Discuss the idea with a few friends.
    Even if they have nothing to do related with the game or development.
    That kind of discussion may lead to some great ideas.
    Specially when discussing with someone who know nothing about development. Let the creative
    ideas flow!!
3 - Try to identify a script, stages, scenarios - beginning, middle and if possible ending of the story.
    Which means: develop the idea into a novel / script. A short one. Just kind of a summary.
    That Script I do like to do on excel, as I can organize it better.
4 - Scratch some scenarios on a paper + pencil.
    Even if you don't know how to draw, its important for you to specify a scenario to work on.
    That way your idea will start to create life, even if on your mind only at first.
5 - Research other successful games that resemble yours.
    Identify the engine, the behaviors existing on them.
    Look for a game that have a similar art concept as you want yours to have.
    Study them and imagine your creation using those styles.
    Exercise your mind!
6 - Research some UNSUCCESSFUL games.
    Try to identify why they did failure. And what was the reason it did not bring any attention to
    the gaming community.
    A good source for that may be kickstarter. Look for games that did not receive the necessary
    funds.
    Understand the mistakes, so you may try to avoid them.

Those are the tips I came up for today.
I will soon start to describe the technical matters, issues, and developments.
Hope I can come up with issues solutions, ideas and so on.

Regards

Interesting read. Just replied to keep an eye out on new posts. (Hopefully you don't always make edits )

Me too, I like reading this kinda stuff, motivates me;)

Interesting read. Just replied to keep an eye out on new posts. (Hopefully you don't always make edits )

Thanks!
I will only edit the Summary / Index post (second post on this topic).

As I already introduced myself and done the "idea creation process" post, I hope to start discussing the developing and art creation. Issues, workarounds, share code, drafts, storyboards, share a lot (lol).

Me too, I like reading this kinda stuff, motivates me;)

=)
Thank you!
I also love to read this kind of report / stuff.
I think its always a good think to read others "diary".

Also I think it will be very interesting for me to read it again in the future, to see if I change the way I am working, if everything went as planned (never do!).

I hope to bring cool stuff for you guys!

Art Tip 1: Light Effects

I know I should start discussing technical things, but I really want to share with you guys an art concept / design I have done today, and I do believe it did turn out great.

First of all, I do believe that we should do all we are able to do to achieve a great design on our game.
I know that pixel art is great, there are really cool games using it, for instance Hotcall Miami.

But I do believe that in general we must pay really close attention for a good art design.

I am on that stage right now, doing some art for my game.
And one thing that will matter on the gameplay is light (stealth game). It will have an effect on the gameplay.
So I started drawing a StreetLamp. It was a simple one but cool (I am working with vector design).

Then came the trick, the one I want to share with you guys!
Light effect and transparency.

I was doing some research on some games and I came up with this image:



And I did think: "I want that kind of light on my game!!!".

But how to do it?

First, I came up opening the pole (street light pole??) on photoshop.
Then I draw a kind of a triangle.
That simple triangle I will use on two different actors. And I will explain it later.

So, I created two similar images using that triangle.
But both of them are flat. Right?

I did use a tone of yellow and a dark yellow.
Then I did apply a gradient on the image, so it would be brighter on top and darker on bottom (will post some pictures bellow).

First beam of light:

(remember to use transparency around the light).

Second beam of light:


As you can see, those two lights together form a single beam of light.
And now you do ask: But if they are the same triangle, why you did need two instead of one?
I will explain it just bellow...

But it seems poor. Right?
You cannot imagine it being any near as cool as the Mark of the Ninja image I did put above.
Right?

So I went to stencyl.
And now you will understand why I did separate it in two images...

I did create a Light_1 actor and a Light_2 actor.
Two actors for the same light.

Still strange... dont make any sense...
Calm down. Keep reading.

For the first actor I did use two events. Those two are for Blend Mode, which is explained on Stencyl Tutorials:


and


But I did use 40% instead of 50%.
And Blend mode Normal.

Then, for the second actor I did use the same events, but instead of 40% I did use 25%.

What was the result?



Cool!

Its not finished. As I do want to include the white blur light on the top of it...
But I did like the result.

I am still working on that scenario.
Its good on my monitor, but I did test on another monitor and it went too dark. =(
So I will light up a little.

Also the character will not be that one. Its just an existing sprite I got to test movements.

Hope you guys like it too.

Best regards

Couldn't you just have all the beams be part of one image and alter the alpha level overall?

Couldn't you just have all the beams be part of one image and alter the alpha level overall?

Is it possible for you to give me an example?
Cause I dont know how to alter the alpha level overall.

Did you mean one simple image with different tones of yellow and then blend it over?
I didnt do that cause I wanted different transparencies on my image. You know? The character will be more yellow on the Beam 1 and less yellow on Beam 2.

But please help me understand that Alpha Level.

Thanks!

Sure; I recombined your two images as two separate layers of an image in GIMP. I don't think I lined the up perfectly but it'll do for the example.

One layer is 50% transparent while the other is 40%. When combined, the overall image results in variable transparency.
"Alpha" refers to the transparency of a pixel. RGBA means the Red, Green, Blue, and Alpha values of a pixel that combine to result in the final color. By varying the alpha across the image you can vary how transparent it is.

Of course, here in the forum the color looks a little washed out because of the grey background; try using the image below in your game - be sure you don't alter the opacity of this one because the alpha channel already has the transparency built-in.

What a great learning!!!
I didnt know that the transparency could be done directly on the image itself.
Thats why I was using the blend option on Stencyl.

Your final image was kind of different from mine, but no big deal, as I know it is regarding the transparency differences.

Your example was really cool, as now I know that I dont need the blend mode anymore. =)
Now I can make all my light effects direct on the PNG image.

Thanks a lot mate!

Blend modes are still useful, because they change how the transparency is treated. You just wouldn't have to set the Opacity in Stencyl - or split your light into two images.

If you want a better idea of what different blend modes can do, check out the wikipedia article. There's some nice examples.
http://en.wikipedia.org/wiki/Blend_modes

Blend modes are still useful, because they change how the transparency is treated. You just wouldn't have to set the Opacity in Stencyl - or split your light into two images.

If you want a better idea of what different blend modes can do, check out the wikipedia article. There's some nice examples.
http://en.wikipedia.org/wiki/Blend_modes

I really do appreciate your help.
Thanks for that tip!
I do believe that graphics are an essential matter. Even on pixel themed games. =)

I will study those blend effects better.

The importance of paper and pen

I will try to explain better why I think that one of the most important things when developing a game is to have a paper, pencil and pen by your side.

I do use a pocket notebook and pen for ideas and some paper and pencil for scratches.
And I keep it all stored for references.

One of my first sketches of my game was the street scenario, the first scene of my game.
I did draw something quickly, a sketch, scratch, name what you want.

It was this:


The white one is the original.
The black (contrast / inverted one) I made do highlight the drawing.

Then, time passed by and I did experiment a lot of drawings...
And then I was heading on this style:

 

Remember: all you see above is a draft.
I was still going to complete the transparency on the fence and fill the scenario with other objects.

But then I did realize it was too polluted. I was really not enjoying it.
But I got a "click" on my mind that said: "Use a simpler graphic style - focus on 2D".

And I did...
I started focusing on Vector Drawings, pure 2D images...

And now I am heading for this style:


(never mind the right side of it - the bright "entrance" if shown on your screen resolution - it was just a test. The scenario does not have it, its a different one now).

I do prefer it better. A cleaner and more efficient style.
Specially for the fact that I am a programmer / developer, not an artist.

When I then did look into my first drawing, the draft, I was amazed by how similar the scenario was with it.
Something really got into my mind that made me develop the scenario similar to the draft I made.
And believe me, I did not use the draft when drawing the scenario no photoshop (I dont have illustrator - will do soon).

That is just an example why I think its really important to have a paper an pencil / paper and pen to write down all your ideas.
I can enumerate a lot of "to-do" tasks that I have written down and used weeks / months later. Good ideas that could have been gone away.

So, grab you pen and paper and take notes of everything that comes to your mind.
And draw... draw a lot!

Regards

Surveillance Camera Behavior

I am now developing a "Surveillance Camera" Behavior.

It will be a beam of light (almost transparent) that will decrease its size as the camera moves.
Then it will increase again.

I did the images itself with transparency inside of the PNG (thanks Hectate!!!).
And it seems great visually.

But now I am facing a minor issue, which I do have a solution but may not be the most practical one.
My actors does not have any collision, as its part of the engine.
The detection is being controlled by the X and Y position of the player and enemy.

Why no collision at all?
It will be a stealth game but with no violence / contact. When the enemy detects you the scene will be over and you will have to try again. Similar to what was done with Tiny Thief.
I guess there are plenty of examples on Youtube (for Tiny Thief).

ok...
So, I have the animation made and all seems fine.
But how do I control the detection?

The camera will have its beam similiar to this one (Gunpoint):


You can imagine the beam decreasing its size (Do Every N Seconds Behavor).
And when its all decreased it will increase itself again.

That is done, great!
But the detection... ah the detection...


Inside the Drawing Event (always) I am doing a "Create Region at..." for each animation, which is 5 at the moment, and then I am asking if the player enters that region (another event).
Correction: Inside a "Do every N seconds" Event, when N is a 3 (Do every 3 seconds) I am doing...

If so the detection will trigger.

I dont think that it is an elegant solution, but its working.

Issues I do have to solve:
- Its only working when player is moving to the right (left to right), but its not when its right to left. Will work further on that, as I did it quickly (I am going to work now).
- Develop a more elegant solution (maybe using collision for this actor - camera beam).
   For this issue I will implement the Collision Behavior. And create a new Group for Detection (that may be used for other actors). And maybe it will solve the right to left movement lack of detection.

Any sugestion?

Regards