New Sokoban – The art of making art

In today’s post I’m going to talk about art asset creation for New Sokoban. My artistic skills are limited and I am an autodidact in this field. So, I needed to create the art for New Sokoban taking into account this limitations. My idea was to create abstract assets playing with plain colors and some basic effects like shadows and border strokes.

I started with the game screen because I felt that it was the most important one and that it would set the artistic path to follow. In the following image you can see what was my first try.

New Sokoban Art creation - First try
New Sokoban Art creation – First try

As you can see my general idea was to create some kind of frame that helped to create the illusion of having some kind of interface. So, at the top I would have something like the name of the current puzzle, at the bottom I would have some basic buttons like “Menu”, “Undo”, “Restart”… and in the middle of the screen there is the puzzle itself. I had been thinking about having more room for the playing area and designing the puzzles in some rectangular shape. However, I liked the squared shape of the puzzles I had designed until that moment and I thought (and still think) that the squared puzzles have something special. So, I kept the square space for the puzzles.

So, having decided the general layout of the game screen, I moved to the design of the board itself. On the image above you can also see my first try for that. Very simple and classic. And probably… boring. Curiously, the thing I liked the less was the walls. That bevel effect was horrible and I think that gives this first try a kind of amateurish feeling. So, it needed some more work…

Then I had some interesting idea. What about “emptying” the walls? I didn’t like the walls and made the game feel too much classic. So, I decided to try make the walls disappear. On the bellow images you can see the first tries of this new concept.

Mental note: art asset creation and, in general, any artistic activity is all about getting the right path. I mean, execution is easy. If you know Photoshop or Illustrator or whatever tool like these ones you will be able to replicate any asset you see in any game. However, reaching the idea, finding the inspiration, ringing the bell is very very difficult and sometimes frustrating. However, patience and keeping an opened mind helps preparing the path to the right idea.

New Sokoban art creation - Playing with empty walls

New Sokoban art creation - Playing with empty walls

I felt much more comfortable with this concept. Therefore, I kept working on that direction until I reached a board design that I liked enough. On the image below you can see the final version of the board. You can also see the final version of the box and the target. I don’t know exactly why the basic boxes are red. This was the color I first chose for the first prototypes, without thinking, I simply picked that color. But, I get used to it and finally liked a lot. So I kept that red color for the basic box. With the target I wanted something with the feeling of a button, something that got activated when a box laid on it.

New Sokoban art creation - Final version of the board, basic box and target

New Sokoban art creation - Final version of the board, basic box and target

Obviously, if I made the walls empty I needed to show something bellow the board. I decided to put some abstract background and add some shadows to the board to create the effect of the board levitating over the background. It got a kind of oneiric feeling that I liked a lot. Therefore, the idea was approved 😀 Moreover, to reinforce that oneiric feeling I slowly animated the background, moving it from left to right and vice-versa, very very slowly. You can appreciate this effect on the video included later.

The only thing left to do were the buttons. I tried lots of sophisticated designs but I finally decided for a very simple design. You can see the final version of the game screen on the image bellow.

New Sokoban art creation - Game screen final version

New Sokoban art creation - Game screen final version

The basic layout was kept. I added descriptive labels to the buttons and a moves counter on the top right. If you tap this counter, it switches to a clock version. So, you can choose to see the moves you have made or the time elapsed. This are the two parameters that I use to evaluate a puzzle solution. The moves determine the stars you win and the stars + the time elapsed determine the final score.

When I reached that point I was sure that the hardest part was done. But as usually, I was wrong… The menus screens and the win screen were also very very difficult to create. My idea was to create these screens in some manner that the player felt some kind of feeling of continuity. Starting from the main menu screen and until the win screen.

In my first prototypes I tried to link the different screens with the boxes of the puzzles. But that didn’t worked. So, once more, I decided to keep things simple and reused the idea of the moving background to link all the menu screens and achieving the continuity effect I was looking for.

Mental note: keep things simple. Always and for every part of your game. Game design, art, code… everything. You will learn that when simplifying thinks not only everything gets easier but also better.

On the following video you can see all these things working together. This video also shows the current state of the game. It is in a quite advanced state 🙂

So, this should be very close to the final release. There are some things that I still doesn’t like. For example, I am not totally convinced about the win screen. It is a very important screen and I think that something is wrong with it.

Wow! Quite a large post! I hope you enjoy it 🙂 If you have any suggestion about the appearance of the game, leave a comment please 🙂 Any kind help would be appreciated.

6 thoughts on “New Sokoban – The art of making art

  1. La opcion Undo deshace el ultimo movimiento y tambien resta en el contador de movimientos, hay una opcion de mas dificultad que contavilizen tambien los movimientos hechos con Undo en el contador global de la pantalla y solo resetearlo haciendo un Restard por ejemplo, seria una opcion de añadir mas dificultad para conseguir las 3 estrellas por pantalla por ejemplo.
    Para cuando la Beta? :p

  2. Pues has vuelto a dar en el clavo xD Esta es otra de las decisiones de diseño difíciles de tomar. Hemos estado horas hablando del tema con Belén xD Al final nos decidimos por la opción menos arriesgada. El principal problema de hacer lo que propones es que penalizar el Deshacer puede ser frustrante para el jugador si resulta que ha cometido un error. Por ejemplo, a veces si dos piezas están muy juntas puede pasar que muevas la que no quieres. En realidad, para estos casos puse la opción de deshacer. Sino, directamente la hubiera eliminado.

    La beta está lista xD Si me envías el UDID de tu iPhone te envío una build 😉

  3. Por eso se le llama PENALIZACION no? xD el hecho de que se llame asi es para indicar al jugador que se a equivocado( voluntaria o involuntariamente) y que reflejado en el marcador global. La propuesta es como opcion de otro modo de juego no como condicion indispensable del juego asi en plan para jugadores hardcore con 2 posibles implementaciones, como una opcion en el menu principal o como modo de juego alternativo o simplemente dejalo como esta que tambien esta bien, solo es una propuesta 😉

    En cuanto suba a casa miro el UDID y te lo mando 😉

  4. Sí, entiendo lo que dices y, de hecho, estuve sopesando esa posibilidad. Pero creo que es menos arriesgado dejarlo como está. Dependiendo de como vaya una vez el juego esté en la AppStore sí tengo pensado revisar este tema y plantearme la posibilidad de añadir diferentes modos de juego. Y entre los posibles añadidos está este tema del undo.

    Gracias por tus aportaciones Xapi! Son muy elocuentes, acertadas y útiles!! Y me hacen pensar mucho!! …xD

  5. ironia aparte xD ya te e enviado el UDID por mail , llegaras para presentarla en la devup?
    Ojo en lo que me acabo de fijar………. en la parte inferior de la pagina hay 2 check-in y en uno de ellos pone si kieres recibir notificaciones via mail ( sin necesidad de suscribirse) xDD

Leave a Reply