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:

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:

and Webkit-based browsers:

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:

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…

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 :

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.

• 2010/09/03 tested on iPad :) . Actually I’m quite happily surprised by the result.

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 !

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.

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.

• 1280 x 800
• 1440 x 900
• 1680 x 1050
• 1920 x 1200
• Iphone
• PSP

Previous wallpapers

• Satanic Gameboy Wallpaper

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.

• 1280 x 800
• 1440 x 900
• 1680 x 1050
• 1920 x 1200
• Iphone
• PSP

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

I stumbled today on an interesting idea on the Japanese website of Domino’s Pizza.

When you have ordered a pizza online (after a fastidious registration process, as only Japanese site have the secret), you are invited to follow in “real-time” the progression of the making of your pizza.

Since you will need to register and actually order a pizza to see it, here is a video that gives a good idea:

The video integrates your name, your order, and your geo location with a nice usage of Google Maps API. I guess this is the japanese version of the US site. A fine localization work.

The next step would be to add GPS positioning on the delivery scooters, to be able to track exactly the delivery boy during his run…

More than the shiny design (..mmm OK,it plays a bit maybe) and the very intuitive UI (I am a big fan of Expose), it’s essentially a couple of applications — that I learned to love work with during my actual job — which made me make the jump.

Some or them are free, the others don’t exceed $100, which is not too expensive regarding their quality (and very cheap compared to, let’s say, Adobe products…). I am still quite new on Mac OS, so if you have any suggestion of useful software, I am more than interested.

MAMP

I guess every PHP developer around knows this one ;) , but for the others…

MAMP stands for Mac, Apache, MySQL, PHP. It allows you to run a PHP driven website on your local machine, with the same settings as your actual live server. It is very useful to create virtual hosts, or to manage your local db.

There is a free version, which does the job quite well, and a pro version around $60.

Coda

I was using Notepad ++ while on Windows, and was quite happy with it.

Then I discovered Coda.

I never managed to find a text editor with a more intuitive interface, usable shortcuts than with that application. The FTP/SVN integration works very well too, and make working on complex projects (remote team, many revisions, etc.) very easy. And it’s beautifully integrated into the OS.

Textmate is perfect when you deal only with English, or western characters in general, but when you use multibytes characters (like Japanese, which I deal a lot with), the spacing between the characters is all messy and it’s very inconvenient to work with. I heard there is a workaround to this, but I never had a chance to find what it is (if you have an idea, any comment is welcome).

You can grab Coda here (about $100).

Versions

If you’re working as a team, which seams to be a very common pattern in this industry, chances are high you’ll need a Version control system.

For those who are looking for an easy to use, nicely designed front-end, Versions might be what you need.

It includes several SVN versions, nicely handles SSH, and offers a very easy to use timeline function. And like Coda, is really beautifully integrated in the OS.
I know that there is a SVN client integrated in Coda. But if you prefer a dedicated application, Versions seems to me like a very fine choice (and it’s only $30).

Cyberduck

Again, Coda includes an integrated FTP, but for those who like a dedicated client, Cyberduck is just really fine.

It has FTP and SFTP, let you CHMOD, manage folders, see hidden files, etc. — all the classics. And it is free.

Skitch

In my work, I use a lot of screen captures.

It can be to add elements to a design directly on the top of a capture of a live design (useful when your layout files contains MANY layers and you don’t want to open them). For archiving. To share with people. Etc.

Skitch combines the ability of Mac OS to take a screenshot of just a portion of the screen with a very useful palette of tools allowing you to scribble directly over the capture: text, arrows, circles, free drawing… You can then publish the edited screenshot online in one click, and share the URL (which is unique, and known only by you or the people you want to share it with).

It is super convenient when you work as a team, and are testing/debugging a website, a simple drawing being sometimes way more explicit than a long explanation. And also it’s free.

Don’t hesitate to leave your opinion, comments, etc.

Still some bugs:

• Javascript compatibility issues between the different Jquery versions of the plugins used: the contact form doesn’t work…
• CSS issues for some layout cases.
• The layout is tested only in Firefox 3.5.3 and Safari 4.0.3.

You can find some of my illustrations in the 3rd edition of the CFSL Artbook. Many gifted artists are featured, and the quality of the print is really nice.

Here is the presentation of the editor, taken from the editor’s website:

Ankama Edition introduces the third volume of CFSL.net Artbook!
The best of the French artists’ community have gathered again for this new edition! Even more authors, more talent, and many more illustrations than your eyes can take at once…
The CFSL.net artbook is 300 pages of eye candy displayed on glossy paper for the attention of fans of digital design and traditional drawing, as well as professionals, students or any other kind of artists…

You can also grab it on Amazon.fr!