Jérôme Sénaillat

Uni-ball fanthom The Game

Jérôme — Tue, 13 Jul 2010 02:50:48 +0000

Uni-ball asked me to build a flash game for the launch of their new pen, the Fanthom.

They already had a clear idea: the game had to be a casual game, based on the popular Luxor. I had to come up with a full new game design, matching the existing fanthom identity. The different elements were then integrated in the flash game engine, and plugged to a database to register highscores.

It was a fun project to work on, with all these halloweenish illustrations to create, and I am quite happy with the result. I just wish we had more time to add extra features…

The game has the following specs:

17 different levels, of increasing difficulty (levels loop endlessly, so level 18 is the same as level 1, only faster etc.)
4 different types of bonus
Highscores, updated daily
Simple backend to generate CSV for the client

It’s in french, but I think that the gameplay is quite easy to understand…

Simple Css 3 buttons

Jérôme — Mon, 12 Jul 2010 20:22:55 +0000

I know that there are many other ways to do this out there, but I just had to come up with my own — you know how it is…

The buttons can be found here: http://media.dkpn.jp/css/css3-buttons-01/ (CSS)
They should work with Firefox and Webkit based browsers (Safari, Chrome).

The basic styling looks like this:

1
2
3
4
5
6
7
8
9
10
11
12
13
14

a._but {text-decoration: none; outline: none;}
a._but:focus {–moz–outline-style: none;}
._but {
background: #ccc;
border:1px solid #d9d9d8;
padding:7px 10px;
font-size:14px;
text-shadow: 0px 1px 0px #fff;
font-weight: bold;
color:#000;
box-shadow: 0px 1px 0px #666;
cursor: pointer;
white-space:nowrap;
}

You’ll notice the pseudo class :focus, which tells Firefox not to add dots around a clicked element (as found here).

The other “new” elements are the text-shadow property, which seems to work without any prefix on my versions of Firefox and Chrome, and the box-shadow one that just doesn’t work for now…
The white-space part if for inline links, to avoid them being cut in two.

We know add the styling for Firefox:

1
2
3
4
5
6
7

background: –moz-linear-gradient(
center bottom,
rgb(224,224,224) 26%,
rgb(238,238,238) 63%
);
–moz-border-radius: 10px;
–moz-box-shadow: 0px 1px 0px #666;

and Webkit-based browsers:

1
2
3
4
5
6
7
8
9

background: –webkit-gradient(
linear,
left bottom,
left top,
color-stop(0.26, rgb(224,224,224)),
color-stop(0.63, rgb(238,238,238))
);
–webkit-border-radius: 10px;
–webkit-box-shadow: 0px 1px 0px #666;

You name it, rounded corners, a subtle gradient for the background, and a 1px drop shadow. I used this tool to grab the correct rgb values.

Well, it’s basically it. I added two pseudo classes, hover and active for the button states, using the same kind of properties. The only part that might need attention would be this one maybe:

1 2	–moz-box-shadow: 0px –1px 0px #666; –webkit-box-shadow: 0px –1px 0px #666;

The negative value of the box shadow generates an inner shadow, which I used to give the impression the button is pressed.

I guess you could just add more vendor prefixes as you want…

Donut : z-sorting

Jérôme — Tue, 15 Jun 2010 02:38:22 +0000

Still messing around JS game things…
This time I tried to implement simple Z-sorting.

Try it here: http://media.dkpn.jp/js/multi-chara-01/
It should work OK on recent versions of Firefox, Chrome and Safari.

15 characters are randomly generated on each refresh. I tried to push a bit the numbers : it’s fine until 50 characters, but starts to be real slow after. 200 or more characters is just incredibly slow, and may even crash the browser…

I guess it’s because of my way of updating depth :

1
2
3
4
5
6
7
8

Maybe there is a less CPU intensive way to deal with this ? I didn’t manage to include it directly into the characters animation function…
My code is pretty messy, but if you’re curious it’s here.

Donut : a javascript game engine experiment

Jérôme — Fri, 11 Jun 2010 01:50:25 +0000

The other day, I was wondering if I could create a simple point and click game engine only with javascript… I ended up spending a couple of hours building a simple prototype, with characters I made for Yokata.

Test it here: Chara move test 0.0.1 (only character movements and simple speech bubble)
The music of the demo is not by me. It has been made by the wonderful Ultrasyd.

It’s pretty rough for now, but I think the idea is there. No use or canvas or any other fancy HTML5 feature, just good old divs and Jquery for the animations.

It has been developped with Firefox 3.6.2 on a Mac. ~~There is a positioning bug in Safari/Webkit and Chrome, I’m working on it… (or if you have any idea, don’t hesitate to mail me).~~ This is fixed. I have no plan of supporting IE for now.

This is a work in progress, and should be updated frequently (well, depending on my time of course).
For now, the only features are :

Click and go — limited to a square area around the character.
~~To do : make this round~~ Done.
Background scrolling
Collisions with NPC, generating different type of events (simple alert, dialogue, etc.)
Random “jewels” generation for each level (not featured in demo)
Login/logout (not featured in demo)
Life, money, stats. (not featured in demo)

To do :

~~Fix Safari/Chrome start positioning bug~~ Fixed
Collisions with jewels
Add 1st plan with z scrolling.
Save position of character, background, level
Make level building dynamic
Add ability to change character
Add sounds (ideally, without Flash)

Updates:

2010/06/11: Added cookie saving player position, background position, and profile (left or right).

I called this “Donut”, because of the character’s face.

Comments and critics welcome !

New Google Ads video

Jérôme — Fri, 04 Jun 2010 10:03:15 +0000

A while ago, I worked with Google and USN to create a couple of B2B videos to advertise Google Ads for mobile.

The first one is online for a while, and I just received the link of the second one. Well, it might be no masterpiece, but I’m still happy with the result, considering the tight deadlines and the complexity of the decision process when working with such a large company as Google.

Logolog

Jérôme — Sat, 29 May 2010 18:38:23 +0000

Custom WordPress theme design and integration for a japanese logo showcase service, for my friends at Lig.

Google Mobile Ads

Jérôme — Sun, 09 May 2010 15:13:40 +0000

Google needed a couple of B2B videos to explain the benefits of their Mobile Ads service to potential clients.

They wanted something visually simple, that would match Google identity and tone, didactic, and short. It should also be generic enough to be easy to localize in several languages. We didn’t have much time, and went for something quite minimal.

I was responsible of the global direction of the project, visual choices, and animation production.

Visuals were also declined in a couple of give-aways: eco bags, notebooks, etc.

Little ghosts Wallpaper

Jérôme — Sun, 09 May 2010 14:52:09 +0000

These days, I’m working now on a game interface for a client.
They didn’t like these, saying it was too “simple and childish”. Damn.
But I quite like them anyway, so I decided to turn them into a couple of wallpapers.

Previous wallpapers

Satanic Gameboy Wallpaper

Chronic’Art #63 cover

Jérôme — Sun, 14 Mar 2010 17:23:49 +0000

The french magazine Chronic’Art asked me a couple of illustrations for their 63th issue, which main theme was Gonzo journalism and its modern heritage.
I designed the cover illustration, and the double page illustration for the main topic.

Satanic Gameboy Wallpaper

Jérôme — Sat, 30 Jan 2010 17:16:29 +0000

A couple of days ago, I posted a “Satanic Gameboy” sketch on my blog.
Well, I redraw it, and made it a wallpaper, in a couple of different sizes.

If you don’t already know, you can also take a look at the excellent Kitsune Noir “Desktop Wallpaper Project”.