About dancingmad (twitter: @bousquetm)

Entries

 
Ludum Dare 33
 
Ludum Dare 30

dancingmad's Trophies

dancingmad's Archive

Internship Adventure – Graphical Making of – Part 3

Posted by (twitter: @bousquetm)
Wednesday, October 7th, 2015 11:22 am

(by Pascal Pouvereau)

This post is the last part of a three part article.
If you missed previous parts, you can read it first :
Internship Adventure – Graphical Making of – Part 1
Internship Adventure – Graphical Making of – Part 2

Our game is Internship adventure and we advise you to try it before reading this post.
Photoshop & Flash source files are given in the end of this article.

My English is quite poor and a French version is able here.

Collaboration

In the previous part, we talked about the way Roxane (the second graphic artist) helped me on the forest background ; she helped me too on the factory by making 3D models that I could integrate and work in the 2D stage.

Intership_3DRaw 3D renders

Intership_3DComposite3D renders composited on Photoshop

Those works were done during the lasts hours of the production, so the compositing is quite simple.

Mr Borbopopo

At the end of the second day, I temporally stopped working on backgrounds to help Roxane on animations. So, I started to work on the second monster and I could realize it at 100% from conception to finalization.

Internship_MrBorbopopoThe first version had little arms

First, I designed a big monster head, but quickly, it looked like a fat cyclops inside a egg shell (but everyone can see it like he want).

I spent a lot of time to find a good way to animate it. I finally decided to realize it as vector art in Flash. My knowledge about cartoon animation helped me to make funny moves.

MrBorbopopo_ConstructionShapes of Mr Borbopopo

The silhouette was very easy to animate thanks to Flash’s keyframes and the decomposition of the character in three main shapes like a kind of snowman. The eye was separated of the head to increase the cartoon animation.
The mouth had been the most difficult part of the process, because drawn on every 72 frames of the animation thanks to vector lines. I had to modify the width of the line on many frames to simulate the opening or the closing of the mouth.

MrBorbopopo_MouthDifferent width of Mr Borbopopo’s mouth

Once animations done, the work wasn’t completely finished.
All frames were exported in multiple png files and recomposed as tiles in one big file thanks to Graphics Gale.

Graphics Gale is a small software that look quite old with it 90’s interface, but it’s a very useful tool for animation  and the best pixel art tool I know.
I really recommends it because it’s powerfull and free (the only limitation of the free version is animated gif and cursors exportations).

The file containing all sprites is opened in Photoshop and quickly completed thanks to automatic effects (white borders). Working on only one file containing all the sprites is a very quick way to work on every frames at the same time. It avoid to use batch scripts.

MrBorbopo_FinalStepsLast steps of the sprite

Some frames had to be manually corrected because of dirty borders like the third step of the previous picture.

This is the end !

MrBorbopopo_JumpThank you for your attention !
As I promise you, here are my sources of the two levels and the character. Have fun !

Photoshop_File The forest

Photoshop_File The factory

Flash_File Mr Borbopopo’s animation

Photoshop_File Mr Borbopopo’s tileset

Internship Adventure – Graphical Making of – Part 2

Posted by (twitter: @bousquetm)
Friday, September 18th, 2015 10:59 am

This post is the second part of a three part article. If you missed the first part here it is : Internship Adventure – Graphical Making of – Part 1.

Our game is Internship adventure and we advise you to try it before reading this post.
Photoshop & Flash source files will be given in the third part of this article.

My English is quite poor and a French version is able here.

Sky

The sky wasn’t the longest part of work, it was even fast to build, only asking a little for work for the developer and I.

Texture

The artistic direction wanted to be like “done manually”.
Sky was first a simple gradient, but we added a kind of bump effect on it, but this effect was not directly in the gradient sky texture. We added an other map with a “multiply ×2” blend mode that was giving us more flexibility to add other effects in the sky.

Intership_SkySimple gradients and textured sky

“Multiply ×2” is a not enough well known blend mode able to light and dark pixels.
For instance, it is used to simulate lights of lightmaps.

Blend_LightmapLightmap with “multiply ×2” blend mode

In our case, we used it to add details on our original map.

Blend_DetailDetail texture with “multiply ×2” blend mode

This effect look like “Overlay” blend mode, but Photoshop don’t have a “Multiply ×2” blend mode. It’s not practical to simulate it in Photoshop because we have to use additional effect layer.
Happily, in most of game engines, it’s easy because it’s a standard blend mode since the 90s’.

Photoshop_File Example of “multiply ×2” in Photoshop

Gradient

The sky gradient texture is very lite and allow us to build our day/night system.
Pixels of the original texture (4×64 px) can be smoothed thanks to filtering like bilinear, so our little gradient become a perfect full gradient.

FileringTwo ways to zoom on a texture

To make our day/night cycle, it’s easy, we only have to display the gradient on a two screen height plane and to translate it vertically.

Internship_DayNightA simple gradient allow a smooth transition between day and night

Stars

Stars were a little more difficult.
In fact, the most difficult task was to convince the developer because he had  bigger fish to fry. I would like to thanks him because he took the time to realize what I had in my head.

It look like what we did on the gradient, but it was not a translation but a rotation and a progressive alpha blending.

StarsStars rotation in the sky

To optimize memory, we used a looping 1024×1024texture and we made it tile in the plane.

This layer use an other blendmode which is very popular in video-games and FX : “additive”.

Blend_addExample of an additive blend mode without any alpha

Order of layers

The sky has 4 layers with associated blend modes.
We already saw 3 of them, the last is here to emphasize high atmosphere colors thanks to a “multiply ×2” blend mode.

Internship_SkyLayersLayers of our sky

Lightning

Day/night system don’t affect only the sky. Backgrounds layers are affected too.

Both of the intermediate layers are multiplied with a white color on day and a blue color at night, allowing a better integration of environments.

Internship_DayNightEnvironmentForest environment at night and day

Foregrounds

Foregrounds had to look like shadow silhouette but we was afraid that it would not always be visible because of darks backgrounds.
We added a white outline to differentiate active layer and decorative layers.

We first had to use a complex system that allowed to merge shapes without intersection with the white outline but we didn’t had the time to integrate it.

Internship_BorderClassical outlines VS Blended outlines

 

I admit that I’m not proud of our foregrounds but it’s logical, we did it in the rush of the end of the game.

Internship_GameLayerForest foreground

We finally choose to make a two layer foreground and I’d like to thanks Roxane which helped me for the forest.

End of part 2

This is the end for part 2.

In part 3, we’ll talk about our collaboration with Roxane and my work on a monster animation.
Thanks for your attention.

Top 30

Posted by (twitter: @bousquetm)
Tuesday, September 15th, 2015 4:22 am

Youhou, we are everywhere in the top 30 !

Top30

Thanks everyone !

MrBorbopopo_Jump

Internship Adventure – Graphical Making of – Part 1

Posted by (twitter: @bousquetm)
Monday, September 14th, 2015 4:46 pm

In this post, I’ll talk about my experience as a graphic artist in this gamejam and I’ll expose you some graphics process we used in our game.
We were two graphic artists to work on the project but this article concerns only my experience (Pascal).

I’m really sorry because my English is poor and sentences will maybe sound strange.

This is the first part of a long article, other parts will follow.
Our game is Internship adventure and we advise you to try it before reading this post.
Photoshop & Flash source files will be given in the last part of this article.

Preparation

In this game, we didn’t want to use a pixel art style (well that I really like this technique).
Quickly, we agreed about a graphic style with silhouette foreground so that backgrounds would be very colored and graphical.

ReferencesSome refrences : Limbo, Bandland & Donkey Kong Returns

This artistic direction has first been chosen to simplify our work on characters animations (a very long process when we develop a game) while remaining coherent with our vision of the game.
This choice allowed us to enhance deep environments on which we could spend more time.

Since the beginning, we wanted to build small levels fitting only on one screen (no, we are not in LD31 ^^) like a painting that give us a lot of creative freedom.
Our engine was not adapted for big levels without tilesmaps but I refused to envisage tiles.
That was good because the theme of our game fit with this choice.

Roles distribution

We were two graphic artists in the team : Roxane and I (Pascal).
We agreed about working on complementary tasks avoiding collisions in our work :
Roxane worked on characters and animation so that I concentrated on environments.

Internship_RoxaneRoxane working on the caterpillar

You’ll see it next, we finally both worked on the other tasks too on the second half of the jam.

Work now !

Most of the work on environments was classical and I spend most of my time to paint layers on Photoshop thanks to my graphics tablet.
The finishing of layers in the game is not perfect, but, for a game jam, it’s OK.

Internship_LavaPart of the factory level background

Internship Adventure - Forest Part of the forest middle background

Beyond my artistic ability, I have some technical knowledge and I wanted to use it to go further in the graphical realization of the game.
In next paragraphs, I’ll list some of theme.

Parallax

Parallax is a very well known technique in animation and video-game allowing to simulate depth in a scene.
The idea is to move different layers with different speeds related to their distance.

ParallaxeExample of parallax in a temporary level

Well that we choose to work on one-screen levels, I insist early in the creation process to introduce some parallax.
This technique offer supplementary depth in a picture, increasing immersion of the player in the game and gratifying backgrounds.
A blur foreground was expected but we had not enough time to integrate it in the game.

Depth layers4 depth layers of the forest

End of part 1

This is the end of part 1.

In part 2, we’ll talk about sky, day/night, blend modes and foregrounds.
Thanks for your attention.

I’m really sorry because my English restrict me.
If you want a most detailed post in French language, tell me in commentary.

Internship Adventure – Infography

Posted by (twitter: @bousquetm)
Saturday, September 12th, 2015 6:52 pm

Here is an infography about our experience during this LD33.
Enjoy !

Internship Adventure - Infography

Our selection

Posted by (twitter: @bousquetm)
Thursday, September 10th, 2015 8:52 pm

Here is our selection of the best entries we could try during theses last weeks.
So, have fun !

Great gameplays

Gh4st
Gh4st
A great puzzle-game with excellent mechanics ! Unfortunately a little to short.

Mobs, inc.
Mobs, inc.
Almost everything is perfect in this game !

Orange
Orange
Really nice mechanics but where is the theme ?

Who cares the M%rtgage
Who cares the M%rtgage
Simple but with a really addictive gameplay !

Delicious Cortex
Delicious Cortex
Very impressive new kind of gameplay !

Takodemon
Takodemon
100% Innovation !

RGBlob
RGBlob
Great puzzle game with blobs and colors.

Funniest games

Monstre de Coiffure
Monstre de Coiffure
Non-stop funny ambiance. A great LOL game !

Internship adventure
Internship adventure
Ok, it’s our game, but, yes, it’s really funny ^^.

Monster Academy
Monster Academy
Do you like Warioware ? So be a good monster !

Goomba Simulator 2015
Goomba Simulator 2015
Great story around a goomba. What will happed to him?

Artistic games

DAMNED
DAMNED
Great ambiance and artistic direction

Melody Muncher
Melody Muncher
Tis is a rythme game, so, of course, the music is great !

Hop’s Hope
Hop's Hope
Really nice ambiance with a day/night cycle.

The Bear Hunter
The Bear Hunter
Do you like Zelda 3 ? You’ll love graphics of this game !

Meet the Monsta
Meet the Monsta
Graphics design is so great !

Me
Me
Great ambiance with interesting graphics.

Anxiety : Last Night
Last Night
Maybe the most scary game of this LD33 !

Internship Adventure has been translated in French!

Posted by (twitter: @bousquetm)
Saturday, September 5th, 2015 1:11 pm

Borbopopo_fr

I don’t know if any of you are interested, but we’ve made a French version for ‘Internship Adventure’, our Jam entry.

Play the game here:
http://ludumdare.com/compo/ludum-dare-33/?action=preview&uid=39644

Of course, the original game is still available, so if you haven’t played it yet, there’s still time :)

Internship Adventure postmortem

Posted by (twitter: @bousquetm)
Thursday, August 27th, 2015 12:01 pm

It was my 2nd time taking part in a Ludum Dare, and I was pretty excited by the theme! The idea of playing a guy in a costume whose job is to play the monster in a video game popped during the initial meeting with the team, and everyone thought it was cool! I think it fits the them well. Without further explanations, I present you “Internship Adventure”:

39644-shot1-1440541728

http://ludumdare.com/compo/ludum-dare-33/?action=preview&uid=39644

The biggest challenge for me was to make something funny, with catchy dialogs, and a good gameplay on top of that. Would we have time to do all that in only 3 days? Also, being the only programmer in the team, I was worried that I wouldn’t have the time to integrate all the assets from the artists, because that’s was happened during my last LD. (play “Effraction” here).

Before the Jam

We gathered at my place on Friday evening to discuss many things before the jam starts. What kind of tools we will be using, do we want to make a 2D game, or a 3D game? What would the game look like ? What do the music composers want to do? We also created a SVN repository and installed the communication tools (Skype, etc.). We’re located in Europe, so for us, the theme would be announced at 3am on Saturday morning. Time to go to sleep early! Needless to say, I couldn’t sleep well due to excitement (also… it was 10pm).

Day 1

Got up at 7:30, made coffee and had a breakfast with the team. It was composed of 2 artists, 2 music composers and myself (coding). When we agreed on the theme, everyone has to install the tools, checkout the SVN repo, and so on. It tooks almost 3 hours before everyone could start working for real.

Here’s what we had after a full day of work (we went to sleep at 1am):

  • the basic gameplay was working. The player could move, attack, jump and play dead. The hero behavior was almost completely done. I has spent an awful time to make it work but I was glad of the result.
  • we had the first version of the forest graphics
  • the jazzy music and the forest music were almost done!
  • some of the animations of the Hero were done
  • the player was still a placeholder red square

It was good, but the whole dialog/mission system was not started at all. I panicked a little since I had only 2 days left to program it, for the 3 levels! Yeah we initially planned to make 3 levels.

Day 2

Got up at 7:30 and worked until 1am. This day was quite stressful for me, because I had to write a lot of code and dialogs while everyone asked me to integrate their assets into the game :)

What was the game progress after this second day?

  • The mission system was working, the first 2 missions were almost complete, the 3rd one was coded but there was no dialogs…
  • All the songs were almost finished and the voices were recorded and integrated into the game
  • We had all the animations for the Hero, almost all for the caterpillar. the second monster was in progress but not integrated
  • The day/night animation was functional!
  • The level 2 was barely started…

We decided to drop level 3 and focus on level 2 for the last day.

Day 3

Got up at 8:00 and worked until the final submission at 3am. What can I say about this day ? To my surprise, it wasn’t hell :) I mean less than my previous jam. We really focused on making things right instead of making a lot of stuff, so we had to cut a lot of features. I didn’t have time to write all the dialogs I wanted, and level 2 had only 2 missions (the first one has 3).

Around 23pm-00pm we stopped adding things and just polished the game. I finished writing all the dialogs while the artists made a lot of enhancement on the graphics.

A lot of testing and balancing were done too. Some missions were too easy, some were too hard, and we really didn’t want players to quit the game before the end because a mission was too difficult. I think it went pretty right.

What went right

This is my best jam so far, and I’m proud of it! Let me thanks everyone in the team for their incredible work: Pascal, Roxane, Louis and Victor! A few things went right:

  • The teamwork. It’s hard to define, but when everyone manage to work together efficiently, it is really motivating
  • The art, the music, the gameplay, the humor. I was very concerned that my dialogs were not funny enough and that people would just say “dude, that was a poor attempt to make something fun”.
  • The general polishing of the game. As I said before, we spent a lot of time testing and improving all the aspects of the game. It is a little short, but seems pro.
  • We had enough sleep and didn’t eat so much junk food (we even ate vegetables!)

What went wrong

  • As always during a game jam, you plan features but there’s never really enough time to implement all of them..
  • We used XNA to build the game, and it doesn’t come with an editor. Every time an artist wants to improve something, he had to ask me to add it in the game, and everyone lose time. Maybe next time we’ll go with Unity, but I’ll have to learn it first!

Conclusion

That was a long piece of text, hope it wasn’t boring :p To finish, here’s some statistics about our game.

InternshipAdventure_Infographic

Follow me on twitter! @bousquetm

I’m in

Posted by (twitter: @bousquetm)
Friday, August 21st, 2015 3:00 pm

For my second Ludum Dare, I will use again my favorite framework C#/XNA, maybe with TiledEditor (depending if we’ll have tile based levels). I’m part of a team that includes:

  • 1 programmer (me)
  • 2 artists
  • 2 sound/music composer

Hope we’ll do well!

for everyone: dancingmad

[cache: storing page]