# Art Guidelines

## Visual Style :performing\_arts:&#x20;

The visual style was inspired by [Sunnyside World Pack](https://danieldiggle.itch.io/sunnyside) by Daniel Diggle. When designing new gameplay elements we encapsulate a range of key aspects which made the asset pack our choice from the start.



{% hint style="info" %}
Below are some general guidelines for Sunflower Land Art. As always, there are exceptions to what subjectively looks good. We have provided tips to ensure your art is consistent and stands a stronger chance of being added to the game.
{% endhint %}

### - Context&#x20;

Sunflower Land is set in the medieval age, but puts a playful twist on the dark and gloomy that most games use. The game does not focus on the fantasy aspect, but does have an air of mystery and alternate universe concepts (i.e. talking animals, mysterious creatures etc).

![Talking mole](https://2484107373-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FIWGEodCG0c07OUY9iW9t%2Fuploads%2F7sd3obuW89TPIfKrf5l7%2Fbrave_gwwgfX8CZO.gif?alt=media\&token=19fb6fff-9bcc-465f-8056-0d579d11d9f5)

### - Stubby Objects

To give a playful effect, the majority of objects and characters in the game are short and fat. You can think of characters in the game as ‘dwarves’. Buildings, trees and resources also follow this pattern and as a result often mean unrealistic proportions. A NPC, for example, may be almost the same size of a tree or a little chicken.

![Sizes comparison](https://2484107373-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FIWGEodCG0c07OUY9iW9t%2Fuploads%2FTZjk5VwE66hRMmJlXdMS%2Fimage%20\(1\).png?alt=media\&token=eed1c4cd-0049-474c-abab-bea2e8ae0803)

Shapes are always _**whole in nature**_ (no floating parts) and employ almost no negative space - I.e. the design should fill up the whole object without any empty space. For example, the tree shape does not have extending branches - instead it is compact and a single shape.

### - Top Down View

All objects essentially fall onto a chess-like grid in the game. This tends to the idea that objects should be squarish in shape and avoid rounded shapes.

The game takes on a front-on perspective with a slight top down angle (20-30 degrees).

This means that when you design your items you should consider exposing the top of your objects. This is why the NPC characters appear to have such large heads.&#x20;

:no\_entry:Bad Example

<img src="https://2484107373-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FIWGEodCG0c07OUY9iW9t%2Fuploads%2FDgWyaFD3kq5z88pu5oPW%2Fchicken_house-bad.png?alt=media&#x26;token=3a5a8cff-c3eb-48d5-882a-95b6b162c25f" alt="" data-size="original">-This design is front on and does not expose the top section of the building

:green\_heart: Good Example

![](https://2484107373-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FIWGEodCG0c07OUY9iW9t%2Fuploads%2FSlyyZbdfk8IopntUEd8U%2Fchicken_house-export.png?alt=media\&token=5a907778-3e9d-4420-8e9d-d2dee5ecb28c)-This design exposes the roof from a top down angle

As a rule of thumb try to expose 30-50% of the top side of the object

## Artwork Specs :paintbrush:&#x20;

### - Dimensions

The artwork is heavily pixelated which gives it a light and friendly appearance.

The game is made up of a grid of squares, each which is **16px wide**.

We recommend that most artwork falls within the 16px so it can be placed neatly on a square. The height can be slightly bigger (18-20px). This means the design usually overlaps the square above by a few pixels - this helps give a 3D effect to the game.

These dimensions are extremely important as items can be placed anywhere on a map and must not overflow into another square.

{% hint style="warning" %}
There are also cases where 'accessories' may extend the 16px width. This is generally acceptable as long as the core shape stays within the 16px width. A Goblin is an example of this where the body stays within the 16px width, but the ears extend beyond.
{% endhint %}

![Canvas size example](https://2484107373-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FIWGEodCG0c07OUY9iW9t%2Fuploads%2FQshOjGXdBmHPx0TsY7vJ%2Fimage%20\(2\).png?alt=media\&token=af4ea136-647d-4251-b2ec-18f2d75c214b)

#### Dimension Guide

| Object Type                                                                                                                                                                                                                                                                                                                                                                                                                                                | Width   | Height  |
| ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------- | ------- |
| NPC![](https://2484107373-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FIWGEodCG0c07OUY9iW9t%2Fuploads%2FBI6nJILWOR38MfKKp0uT%2Fidle.gif?alt=media\&token=b709eddb-6e8c-4923-81fd-f71144f6b27d)![](https://2484107373-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FIWGEodCG0c07OUY9iW9t%2Fuploads%2FIfwJ2WRTR11vZSEe3Boa%2Frooster.gif?alt=media\&token=3aff6cd7-920d-411e-bbdb-60782e5c9dd3)                 | 16px    | 18-20px |
| Icons![](https://2484107373-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FIWGEodCG0c07OUY9iW9t%2Fuploads%2FpILDQ8KtyMehWwdp0lFG%2Fcancel.png?alt=media\&token=f31fd28a-57ac-4bad-82b5-fc60295a2a69)![](https://2484107373-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FIWGEodCG0c07OUY9iW9t%2Fuploads%2Fe8eMAU3p7VppNIkvZ5Uu%2Fheart.png?alt=media\&token=d3e70ea5-6220-49bb-a68d-1278ce4c5305)               | 10-12px | 10-12px |
| Food ![](https://2484107373-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FIWGEodCG0c07OUY9iW9t%2Fuploads%2Fou2f6M2FT8grReTVo2X2%2Fradish_cake.png?alt=media\&token=84a71199-b5ee-4622-b0ec-ac736cff75ae)![](https://2484107373-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FIWGEodCG0c07OUY9iW9t%2Fuploads%2FML6x5gOxcb5C4fcaMD6Z%2Fcarrot_cake.png?alt=media\&token=2de1798f-c1b3-4c05-917a-52ba4662b712)    | 12px    | 12px    |
| Buildings![](https://2484107373-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FIWGEodCG0c07OUY9iW9t%2Fuploads%2F3ooyiZqkQe6qRDcBYZSy%2Fmarket.png?alt=media\&token=167001c6-8768-4e23-b89c-814248ad70d3)![](https://2484107373-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FIWGEodCG0c07OUY9iW9t%2Fuploads%2FT3AVVhDss9qgn3zqyWsT%2Fbakery_building.png?alt=media\&token=1bb9fced-32c5-4a8d-9968-138be864c401) | 48px    | 48px    |

When designing decorations there is much more freedom as an item can take up a different grid space. You can use the following dimensions:

* 1x1 grid = 16x18px
* 1x2 grid = 16x36px
* 2x2 grid = 32x36px

#### Submitting

When submitting your artwork, also ensure that a square pixel is actually 1x1. This helps keep the raw assets small and makes the game load faster for players.

![Brush size - 1px](https://2484107373-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FIWGEodCG0c07OUY9iW9t%2Fuploads%2FhmouBWMsh1TyVHDtoYmf%2Fimage%20\(3\).png?alt=media\&token=6065bb4b-3ecb-4fc2-be13-5fbdabe60d57)

### - Colour Palette :art:

The game relies on [Endesga 32 palette](https://lospec.com/palette-list/endesga-32). This does not mean you must use only these colours, nor does it mean that using these colours means a piece of art "fits the game".&#x20;

![Endesga 32 palette](https://2484107373-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FIWGEodCG0c07OUY9iW9t%2Fuploads%2F00ggmjgZOihuPbXLc8cy%2Fcolourpalette.png?alt=media\&token=5f6e448d-ecce-43ed-bdf9-6f6186d8023e)

A piece of art typically picks 2-3 of the base colours on this palette and combines it with variations in shades and complementary colours to add interest.&#x20;

There is no strict colour guideline - most of the choices are based on a subjective feel of the art in the game and if it fits in to the overall style. The hue, saturation and shading must fit in with the current style used in the game.&#x20;

To understand how to use variations play around with a range of colour tools, explore colour theory and watch videos (e.g. 🔗[How to choose good Colour Palettes (Pixel Art Tutorial)](https://www.youtube.com/watch?v=uUdMb8Bb2II))

If you're still in doubt, you can always use the eyedropper tool that most of the pixel art editors has.

![Eyedropper tool](https://2484107373-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FIWGEodCG0c07OUY9iW9t%2Fuploads%2FfcfYBWB2NS4uxFKCvlH2%2FeyedropperTool.gif?alt=media\&token=dd8368aa-e42e-4a53-801d-4f23abcf2f46)

### - Borders

Characters use a dark black border for their outlines to help draw attention to them. This is useful for NPCs and call to actions.&#x20;

![Dark border goblin](https://2484107373-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FIWGEodCG0c07OUY9iW9t%2Fuploads%2FrsMdmAp2dwnQMLnrx7CI%2FGoblinDarkBorder.gif?alt=media\&token=d504fcc8-2d56-4fcd-8172-1f0ac55eca75)

Other objects such as resources, buildings and decorations use a dark coloured border based on the objects primary colour.

![Dark coloured border house](https://2484107373-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FIWGEodCG0c07OUY9iW9t%2Fuploads%2F8oTIOMvxe3nhFlQ9vqZ6%2FDarkColouredBorder.gif?alt=media\&token=5d221f7f-c1e7-4616-85a5-0ba09e644b7b)

### **- Shading**

{% hint style="success" %}
Shading is one of the most important aspects of a design which ensures consistency. It is important to follow the current shading styles in the game so your object fits in
{% endhint %}

The SunnySide asset pack takes a simplistic shading style that helps promote a cheerful and 8bit style to the game.&#x20;

The shading style differs to most pixel art games which employ dithering and gradual shading to give a sense of realism and detail. On the contrary, Sunflower Land does **block shading** and relies on solid shapes to give a sense of dimension, lighting and perspective.

As a rule of thumb, add shading when you want to emphasise a shape that an object has or depth. Always ask the question whether shading is needed - can you represent a shape/feature using an accessory?

**Dont** :no\_entry:

_Use too many colours to add contrast_

![](https://2484107373-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FIWGEodCG0c07OUY9iW9t%2Fuploads%2FTK1Ol47mb1ADGaaVjAnP%2Fhuman_bad.png?alt=media\&token=ce4fc04c-6a89-4d69-936e-67733689aeb5)

**Do** :white\_check\_mark:

_Use a maximum of 3 colours for shading on a side of an object (top or front)_

![](https://2484107373-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FIWGEodCG0c07OUY9iW9t%2Fuploads%2FBAmgFRxgN2B95cVKnGCb%2Fhuman_good9.png?alt=media\&token=6c8a96ea-f7ed-45d3-a395-69b4ca0ead59)

**Do** :white\_check\_mark:

_Use object accessories to add contrast (rooster hair, rooster beak, radish in cake)_

![](https://2484107373-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FIWGEodCG0c07OUY9iW9t%2Fuploads%2FY4oWCW2XCKDnoNC1qfZL%2Frooster.png?alt=media\&token=df403ffa-d17f-41e8-b03b-f688c91599e0)![](https://2484107373-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FIWGEodCG0c07OUY9iW9t%2Fuploads%2FvMBm4bMOVZof1DO79TKO%2Fradish_cake-export.png?alt=media\&token=ecd3a022-6bdd-45fd-8fa5-e27569cdd48a)



**Dont** :no\_entry:

_Add excess blocks of shadow. Simplicity is key_

![](https://2484107373-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FIWGEodCG0c07OUY9iW9t%2Fuploads%2FG8KnEX6blsBUZHdDaWlI%2Fstone_bad_example.png?alt=media\&token=c916d694-9c25-41a0-8fc1-1f97a38b38e4)

**Do** :white\_check\_mark:

_Minimise the different blocks/shapes created with the shading. Focus on the shapes you want to create!_

![](https://2484107373-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FIWGEodCG0c07OUY9iW9t%2Fuploads%2FJCStbmCNwCPVsJu88UQB%2Fstone_example.png?alt=media\&token=96d816e8-802c-4c7a-a762-f4477e1fed94)

**Dont** :no\_entry:

_Use speckled shading or dithering_

![](https://2484107373-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FIWGEodCG0c07OUY9iW9t%2Fuploads%2FUVLw6TsPr0VTJnc8xlEY%2Fstump-export.png?alt=media\&token=80add2c5-2a60-4388-a8b3-4b06ee6abc7a)

**Do** :white\_check\_mark:

_Rely on Block shading and highlights that emphasis a shape or feature._

![](https://2484107373-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FIWGEodCG0c07OUY9iW9t%2Fuploads%2FSzIsf2y9A2Q0X2myH3NS%2Fstump-export.png?alt=media\&token=df2d5b51-7f71-4ffa-b9ec-6be266d9343a)

### - Animations

If you want to animate your designs for Sunflower Land, here are some topics you should be aware of:

**Frames:** Most of the animations in Sunflower Land are made by small loops of 9 frames. It's not a rule, but remember that the more frames the animations has, larger the file will be and you probably won't want to play a game that takes a long time loading. 😢

![Working Goblins](https://2484107373-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FIWGEodCG0c07OUY9iW9t%2Fuploads%2F1LbBqndQnKD0E1Mdx4Pm%2FworkingGoblins.gif?alt=media\&token=eaa9804a-9042-4b8b-8689-f9ab98dce8e0)

**Timing:** We usually use 70 miliseconds, but, again, that's not a rule. 😉

In Aseprite you can edit the FPS (Frames Per Second) by clicking with the right button of your mouse on the frames section and select "Frame Properties".&#x20;

![Editing frame properties](https://2484107373-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FIWGEodCG0c07OUY9iW9t%2Fuploads%2F8Mc79lruMNvMuQpysMV8%2FframesDuration.gif?alt=media\&token=06148053-d54b-40fc-9ad4-19e06425ba44)

If you want to learn more, here's a nice video about animations! - [Pixel Art Animation Tutorial](https://www.youtube.com/watch?v=iWvfaiiVuDI).
