This text is primarily aimed at artists who are just starting to work with Match-3 objects, but even experts deeply immersed in Match-3 games will surely find something useful for themselves.
We will talk about the approach specifically to creating "Match-3 items". For clarity, we will consider several fundamentally different techniques that were used in creating art for the Bewitching Forest project by Pictolabra studio. For those who are not familiar with the theory (believe me, "Match-3 items" are not as simple as they seem), I highly recommend an old but still relevant article from the trendsetter in the Match-3 world: https://render.ru/ru/playrix/post/1337
First! Choosing objects for items
Match-3 items have strict limitations:
they must fit into a square, into their cell on the field;
they must be of different colors that suit them and do not look strange;
they must be as simple as possible, without fine details;
they must match the game setting;
Therefore, it is worth restricting the flights of imagination of non-drawing colleagues who endlessly suggest strange options for long and narrow objects that you simply cannot transform into a round, plump item.
The process of choosing objects for items is long and tedious. Our setting about a house in a fairy forest surrounded by a garden and flower beds dictated to us a fruity-berry-forest theme. As a result, after many experiments, we chose a fairly banal but very familiar set of basic elements. Apples, flowers, and leaves are present in almost every other Match-3 project and roughly correspond to the same colors.
We will skip the choice of colors for basic elements; in Match-3 games, the color scheme is more or less the same everywhere, and we will move on to the most interesting and, I hope, useful part - creating items.
Hooray! Finally, we start "drawing"
We say "drawing" because creating items is more like a mix of modeling, rendering, design, and only in the last place classical 2D drawing, at least in our execution.
Let's consider three approaches to creating items:
2D (leaf)
3D (rocket)
2D+3D (bomb)
But before that, a little bit of boring information. Each item will be a "smart object" embedded in a common PSD file. This is mandatory and necessary for us for several reasons:
the source file in which we create the items image obviously should be larger (it's simple, we draw in 1000 by 1000 pixels resolution, then reduce it to 100 by 100 pixels and get a clear image without artifacts and brush traces);
during the creation process of the item or during the adjustment of items to each other by color, tone, size, we need to evaluate in real-time how one or another change looks against the overall picture.
In the end, the workspace looks something like this:
On the left — a PSD file containing smart objects of items, on the right — an open smart object. By making edits to the source leaf or any other item, we immediately see how this or that change affected the final image.
2D leaf
Usually, to simplify the process and speed it up, we use a combination of 3D and 2D, creating so-called "3D blanks", rendering and then painting. This is an effective method and we will describe it below. In the case of a leaf, creating a 3D model is pointless. There will be no time savings, rather the opposite. The leaf has many veins, serrated edges, and on top of that, it is flat. Therefore, in our case, we go to Photoshop and use the wonderful tools of the "Pen" group. Essentially, this is a toolkit for creating vector images in Photoshop.
Of course, you can go the traditional route for an artist and use an old-fashioned brush, but no matter how strong your hand is, it will be very difficult to get a smooth, clean item. In addition, you will have to put in significantly more effort. Plus, vectors are good because you can easily and simply adjust the outline to achieve the perfect result as much as you want.
Step one - outline
At this stage, nothing is complicated. Based on a pre-prepared sketch, we create a vector outline of the future leaf. Since this is a vector image, the outlines are smooth and harmonious. No matter how you twist it, it's difficult to achieve such a result with a brush. Already at this stage, we see how the future item fits into its place on the field.
Step two - completed item shape and main elements
We continue to work with the Pen tool and create veins and the stem of the leaf. We put each vein and stem into a folder to sort of combine individual objects into one, but we do not merge them so that we can always quickly adjust something. Next, apply standard Photoshop effects (shadow, gradient) to the folder containing all our elements. Do not neglect standard Photoshop effects; it only seems that they look simple, but when you reduce the object and if the effects are set up neatly, unobtrusively, the result can surprise you. The veins are finished, several effects and gradients are applied, now do not forget to check the item on the field.
It fits well into the cell and already looks more or less good.
Important! We adjust the outline and shadow of the items exclusively in the common PSD file, not in the item sources. This is because the source files usually differ from each other in size, and when scaling them in the common file, their size can vary relative to each other. These aspects inevitably lead to slight but noticeable differences in the thickness of the outlines and shadows.
Step three — time for a soft brush
The final stage of drawing our leaf. At this stage, we arm ourselves with the simplest soft brush.
We will use a soft brush specifically to ensure that the final image is free from brushstroke artifacts. In our view, 'painterly' style is not quite suitable for Match-3 items.
Up until now, everything has been simple and quick, but at this stage, patience is necessary. Attempting to do everything in a single layer is not advisable — the more layers, the better. It will be easier to undo changes by simply toggling layers or adjusting the transparency of light and shadow correction layers.
All done! If we evaluate the final image, there is a feeling that the picture is soapy. In fact, it is, but when you reduce the original image to the size of a item on the field, the necessary sharpness appears without any graphic artifacts. Remember — draw in a large size, look in a small one!
3D rocket
In our case, the rocket is a "naked" render with tuned materials that fit into the overall picture as much as possible.
Pure 3D without the intervention of a 2D artist is used quite rarely because it does not convey a sense of "warmth". But in our case, we decided that the rocket should rotate around its axis and the spiral pattern during rotation should attract attention to the rocket. Achieving such a result with Spine 2D tools is more difficult than with a rendered frame-by-frame animation.
As a result, more time was spent on setting up materials and lighting than if we had used a 3D blank and then painted it in Photoshop. But the animation required this decision, and now it is quite obvious that we can integrate a clean render without additional drawing and color correction into a single line with processed/drawn objects in Photoshop.
2D+3D bomb
The most interesting part of our narrative is combining the two previous techniques.
First, it is worth explaining why it is worth using a 3D blank at all, since with the right skill, an artist can do everything by hand.
First — it can simply speed up the process. Often it is much faster to model even a simple object than to build it. Plus, it is enough to set up lighting for rendering blanks once and then just change objects, and in the end, get blanks with uniform lighting and shadow density. In addition, in cases where several artists work on items (this is exactly our case), using 3D reduces the chances of stylistic inconsistencies in the work of several specialists with different skills and styles. In general, it is really convenient, and we did not invent it. The most famous project that used a similar approach in item development is Homescapes. It is also desirable that the artist himself models the blanks. If this work is entrusted to a 3D modeler, the idea becomes questionable because a very detailed sketch will be required, and a certain amount of additional iterations between 2D and 3D artists will be needed, in general, the time spent on the work will increase. In the Pictolabra studio, both artists working on items and other game objects are able to model and draw. It's not difficult, you don't need to be a senior 3D modeler for such tasks, you just need the desire and a little time to master the basic tools.
So, let's start with modeling our cartoon bomb.
We create three primitives and form the basis of our little bomb. Simpler than simple! Any beginner can do it. Just flatten the sphere a little along the Y-axis — it will look more attractive, not as geometrically correct as a perfectly spherical shape.
Next, we refine the mesh, giving the bomb smoother shapes and smoothing it out.
Usually, we use a gray material for rendering and then color the object in Photoshop.
The gray blank can be colored perfectly with any available means in Photoshop. The main thing is to set up the material of the model in such a way that the render does not contain absolutely black shadows or absolutely white highlights. Otherwise, correcting the image will be very difficult.
But since we have already set the colors for the rocket, it would be a shame not to use the work already done on the bomb. By the way, the choice of color scheme is not random. Two-tone special items (rockets, bombs, firecrackers) stand out well against the background of monochrome basic items. A very successful color scheme. The most famous project using this solution is, as mentioned above, Homescapes.
Now, the render. The main secret of the render is very soft, diffused light. Diffused light prevents sharp shadows and harsh reflections. It is important to remember that we are creating a base, and if necessary, we will enhance shadows or highlights in Photoshop.
The blank is ready. It looks dry and not very attractive at the moment. So it's time to head to Photoshop.
The first thing we'll do in 2D is draw the fuse using the "Pen" tool and a soft brush as described above. The fuse could have been modeled, but the artist decided to do it in 2D as it seemed faster.
Next, we finalize the render, applying a huge number of layers, masks with color correction layers, effects, and so on. After each change, we save it as a smart object and assess how it looks in the overall picture. On average, each source file contains between 30 and 50 layers, and in some cases, even more.
All done! But not quite...
Checking items on devices.
Seemingly an obvious point, but in the heat of work, artists sometimes forget to regularly check how the Match-3 field with items looks on a device. As a result, if you ignore viewing it on the device, it's easy to overdo the item's detail, etc. Also, it's not uncommon for the color reproduction of a monitor and a mobile device to differ significantly. This aspect also needs to be taken into account and iterations reviewed as frequently as possible. When checking your work on a device, it's better to use a high-quality device and not try to adjust the result to the color reproduction of a budget smartphone.
A small observation from our practice. Initially, in terms of brightness and color purity of our items, we aimed at the Homescapes project. We got bright, juicy items, and the artists liked it! But we noticed that budget displays on Android devices poorly display soft gradients of light and shadow on our very bright items. As a result, they lose volume and attractiveness. Moreover, during prototype testing, we started receiving complaints from colleagues that their eyes quickly grew tired. Some displays not only poorly displayed the gradation of light and shadow but also turned the clean colors of the items into bright, acidic ones. Meanwhile, on iOS devices, everything looked great. As a result, we decided to "tone down" our items.
This task unexpectedly turned out to be not so simple. We had to painstakingly adjust the color and tonal relationships of the items. It was important that none of the items "faded" against the background of others, nor did any come to the fore. In addition, the difference between items solved in pastel tones and unpleasant "gray" ones is minimal. If you slightly overdo the desaturation, everything turns into an unpleasant gray mess. Plus, we had to work with backgrounds and UI elements so that they did not draw excessive attention to themselves. In the end, in our opinion, we managed to balance the colors in such a way as to avoid burning the retina and at the same time leave a feeling of a bright game.
Conclusion.
All the techniques and approaches described above for creating Match-3 elements are in no way mandatory or recommended by anyone. This is just one variant of a pipeline that suits us and may not be applicable in a team of artists with a different skill set. In general, it doesn't matter how you do it, the main thing is that it's convenient, fast, and of high quality. We find it convenient this way.
Next time, we'll talk about how we created a 3D target in a casual style (still a rare phenomenon in casual games), what pitfalls we encountered, and what we would do differently.
And finally :)
Ideally, working on items never stops. It continues throughout the life of the project. If we look at top Match-3 games, in some of them, items were redrawn many times over the life of the project.
Even in our very young project, some items have already gone through a polishing process and been redrawn.
The first mushroom looks unnatural in color, it's very patchy on the cap, and its shape leaves much to be desired. But in the first iteration, we thought it was OK. Only later, when the entire basic set of items and the graphics of additional mechanics were created, it became clear that it stood out from the overall picture. So perfection is unattainable, but we must strive for it!
END!
Comments