It's important that tile textures loop seamlessly. If they're placed next to each other, players may have difficulty realizing that it’s the same tile being repeated.
In this case, it'll be easier to work using a grid. Click "View" and select "Page Grid" (or press #). Now if you hover over grid lines, Inkscape will let you know when you're working on the grid. Click the rectangle tool, hold CTRL / CMD, and create a square. Select the created square and change the color to brown.
Select the curves/lines tool. Make a zig-zag pattern on the square by clicking on the far left, then a bit to the left and top, then back down again etc. Once you're done, select both the newly created line and the square, then click "Path" and select "Division.” Now you can select a different color for the top part - select green to make it look like grass.
Using the above mentioned tools, you’ll be able to add a highlight on top, create another zig-zag wave under the grass part for shadows, and even add some dirt texture using randomly placed circles. Experiment!
Adding a background to your game can give a good feeling of depth. Start by creating a large rectangle and giving it a light blue color. Select the curves/lines tool again, click once (on the left side of the rectangle), and create a zig-zag pattern like before. Unlike before, click and drag on each point you place to create a smooth curve. Once you reach the far end of the rectangle, make sure you stop at the same height as you started to create a seamless background.
Once done, select both the background rectangle and the new wavy line, and click "Path" and then "Division.” Make the lower part of the rectangle a slightly darker color than the top part. Presto! Now you've got wavy hills.
You can also add multiple wavy lines which are different in height for more layers.
Using the circle and rectangle tool, you can create really basic tree shapes and a sun. Try to experiment using these basic shapes. Backgrounds don’t require a lot of detail.
Instead of trees, you add triangles (pyramids) and cacti for a desert scene.
There's a whole range of free software that allows for pixel art drawing. Some of my favorites are MS Paint (included with older versions of Windows), Paint.net, GIMP, and the in-browser pixel editor by Loscpec. The best one depends on your personal preference, try them all and see which one you like best.
It's often thought that pixel art is the easiest of all the options for visual art. It might be easy to get started, but it's incredibly hard to master.
Larger sprites mean more work to get proper results, so let’s start out small. Draw a small 16 × 16 rectangle and apply a brown color. Place several random pixels within the rectangle in both a slightly lighter and a slightly darker color. Try some 2 × 2 squares too!
Rectangle, dots, grass layer, shadows and highlight detail on top.
Like before, add a zig-zag pattern among the top for grass. Add some pixels below the zig-zag and above (in their respective darker colors) to add a bit of shading. Try to experiment with various types of shading. To finish, add a highlight on top and some random pixels in the grass area.
Let's keep things basic and create a similar character as we did in vector art. Start with an outline and make sure to always place each pixel by hand, without dragging (free drawing) lines. Free drawing won’t give you as much control over each pixel and you’ll end up with crooked, dirty lines.
Slime character sprite (two frame animation).
Fill the shape and add a couple of eyes (try cross-eyed to add a cute effect). Add shading similar to the grass tile and a couple of random dots for texture. You can stretch the sprite a bit to add a second frame of animation for walking or jumping.
Try to create additional frames, or create a coin for the user to pick-up using similar shading and drawing techniques.
You have probably already heard of Blender, a free and open source tool for 3D modeling. I would like to introduce you to a different piece of software though: SketchUp has recently added an in-browser version which is free and requires no installation. The downside is that the free version doesn’t allow exporting to file formats other than SKP (SKP files are compatible with Unity Engine (2017.3+) however).
Head over to https://app.sketchup.com/and create a (free) account to save models you’ve created. Creating a house is a great way to start, so let’s begin!
First, we’ll need a main shape for the building and we’ll start adding details. Select the “Rectangle” tool and click and drag in the scene view to create a new flat rectangle. While dragging, SketchUp will tell you when the shape is a perfect square.
Create a flat shape first, then extrude.
Next, select the “Push/Pull” tool. Click and drag on the flat rectangle to extrude the shape and create a cube. Use the “Line” tool to draw a line on top of the cube, dividing it in two.
Select the “Move” tool, click the line and then move up. Now you’ve got a roof shape! Using these few tools, you’ll be able to add more details to the roof later on (like an overhang), but let’s keep it simple for now.
If we were playing Monopoly, this would be enough to convey a house.
Adding doors and windows is just as easy. Select the “Rectangle” tool again and click on the side of the house to draw a door and window shape. Select the “Push/Pull” tool, which we used to create the cube before. Click inside the door and window(s), then push in by moving your mouse inwards. You’ll (hopefully) end up with a house similar to the one on the left.
Use the tools you’ve learned to add even more details!
Using these few basic tools, you can add more details like a border, overhang, and even a chimney. Experiment with alignment and what the tools do. You’ll also find tools to create circles and arcs - try adding some columns!
Similarly to creating the house, we’ll start with a long rectangle. Use the “Push/Pull” tool to extrude the shape and create a box to sculpt our vehicle out of.
Use the “Line” tool to draw (click and drag to place a line) a crude car shape on the side. Select the “Push/Pull” tool again and push away the top part, leaving only the shape of the vehicle. Select the whole vehicle (CTRL / CMD + A) and then hit G to create a component. This will make sure that if we add wheels, they won’t be merged with the body of the vehicle.
Click and drag using the “Push/Pull” tool to remove the top shape.
Next, we’ll create wheels. Select the “Rectangle” tool again and you’ll notice it opens a few different options including a “Circle” tool. Select the tool, click the side of the vehicle, move your mouse, and click again to create a circle. Use the “Push/Pull” tool to extrude the circle and create a wheel shape.
You can copy and paste any shape, but components won’t merge with other planes.
Select the wheel and press G to create a component. Now you can copy and paste the wheel along the sides of the car. You can use the “Move” tool to rotate wheels, too. Select a wheel and hover over it to reveal red crosses on each side. Click a red cross to rotate the wheel on the given axis.
Final car (on the left), learn about coloring in the next chapter.
You can use the “Offset” tool to easily create windows and hubcaps. Select the tool (hidden under the “Push/Pull” tool) and click any edge to create an offset edge on the inside or outside of the shape.
As a final example, let's create a tree. Start off with the “Circle” tool, click on the axis origin point, and create a circle shape on the floor similar to how we created rectangle shapes before. Extrude it upward so you’ll get a trunk.
Select the whole top of the cylinder by double clicking the top. Then press S to scale the shape, hold CTRL (CMD), and click and drag one of the corners in. This will shape the trunk so it’s narrow on the top and wide on the bottom.
Select the top, press S and scale to narrow the shape.
Select the trunk and press G to create a component. Using the “Polygon” tool click on the top part and create a flat polygon shape, use the extrude tool and narrow the top to create a similar shape as to the trunk.
Starting to look like a tree.
Use the “Push/Pull” tool on the bottom of the newly created shape, then select the bottom and scale it down again (shown on the right in the image above).
What’s a tree without colors? Select the “Paint” tool,choose a green color, and click the tree while holding SHIFT to color it. Then, double click on the trunk, select a brown color, and click while holding SHIFT again to color just the trunk.
Final tree model, try to experiment with various shapes and sizes.
Creating art for games is all about experimenting, getting inspired, and messing around. Take your time to get familiar with various tools and choose the one that feels right. There’s no mistakes, just happy little accidents.
Kenney Vleugels is an artist from the Netherlands who shares game assets (sprites, models, audio, fonts and more) with game developers. Recently, he founded Pixeland which is a physical community hub where every game developer in the world is welcome to learn, teach, meet, work, and play.