Tiling backgrounds

Create 2D Video Game Art with Inkscape Create 2D video game art with Inkscape
13 minutes
Share the link to this page
Copied
  Completed
You need to have access to the item to view this lesson.
One-time Fee
$49.99
List Price:  $69.99
You save:  $20
€46.64
List Price:  €65.30
You save:  €18.66
£39.89
List Price:  £55.85
You save:  £15.96
CA$68.25
List Price:  CA$95.55
You save:  CA$27.30
A$76.15
List Price:  A$106.62
You save:  A$30.46
S$67.98
List Price:  S$95.18
You save:  S$27.19
HK$391.26
List Price:  HK$547.80
You save:  HK$156.53
CHF 45.56
List Price:  CHF 63.79
You save:  CHF 18.23
NOK kr549.77
List Price:  NOK kr769.72
You save:  NOK kr219.95
DKK kr347.88
List Price:  DKK kr487.07
You save:  DKK kr139.18
NZ$83.68
List Price:  NZ$117.16
You save:  NZ$33.47
د.إ183.60
List Price:  د.إ257.06
You save:  د.إ73.45
৳5,493.12
List Price:  ৳7,690.80
You save:  ৳2,197.68
₹4,172.34
List Price:  ₹5,841.61
You save:  ₹1,669.27
RM238.42
List Price:  RM333.81
You save:  RM95.39
₦66,243.24
List Price:  ₦92,745.84
You save:  ₦26,502.60
₨13,934.07
List Price:  ₨19,508.81
You save:  ₨5,574.74
฿1,850.39
List Price:  ฿2,590.69
You save:  ฿740.30
₺1,617.84
List Price:  ₺2,265.11
You save:  ₺647.26
B$255.79
List Price:  B$358.13
You save:  B$102.34
R936.97
List Price:  R1,311.83
You save:  R374.86
Лв91.24
List Price:  Лв127.74
You save:  Лв36.50
₩68,826.74
List Price:  ₩96,362.95
You save:  ₩27,536.20
₪188.13
List Price:  ₪263.40
You save:  ₪75.26
₱2,884.49
List Price:  ₱4,038.52
You save:  ₱1,154.02
¥7,792.89
List Price:  ¥10,910.67
You save:  ¥3,117.78
MX$856.20
List Price:  MX$1,198.75
You save:  MX$342.54
QR182.49
List Price:  QR255.51
You save:  QR73.01
P688.94
List Price:  P964.58
You save:  P275.63
KSh6,748.65
List Price:  KSh9,448.65
You save:  KSh2,700
E£2,392.02
List Price:  E£3,349.02
You save:  E£957
ብር2,872.52
List Price:  ብር4,021.76
You save:  ብር1,149.23
Kz41,694.65
List Price:  Kz58,375.85
You save:  Kz16,681.20
CLP$47,530.99
List Price:  CLP$66,547.19
You save:  CLP$19,016.20
CN¥362.03
List Price:  CN¥506.87
You save:  CN¥144.84
RD$2,934.22
List Price:  RD$4,108.14
You save:  RD$1,173.92
DA6,720.10
List Price:  DA9,408.68
You save:  DA2,688.58
FJ$112.74
List Price:  FJ$157.85
You save:  FJ$45.10
Q389.28
List Price:  Q545.03
You save:  Q155.74
GY$10,471.17
List Price:  GY$14,660.48
You save:  GY$4,189.30
ISK kr7,010.59
List Price:  ISK kr9,815.39
You save:  ISK kr2,804.80
DH505.57
List Price:  DH707.84
You save:  DH202.26
L884.78
List Price:  L1,238.76
You save:  L353.98
ден2,871.74
List Price:  ден4,020.67
You save:  ден1,148.92
MOP$403.59
List Price:  MOP$565.05
You save:  MOP$161.46
N$944.34
List Price:  N$1,322.15
You save:  N$377.81
C$1,841.99
List Price:  C$2,578.94
You save:  C$736.94
रु6,672.93
List Price:  रु9,342.64
You save:  रु2,669.70
S/188.02
List Price:  S/263.24
You save:  S/75.22
K193.20
List Price:  K270.50
You save:  K77.29
SAR187.49
List Price:  SAR262.50
You save:  SAR75.01
ZK1,326.34
List Price:  ZK1,856.98
You save:  ZK530.64
L232.07
List Price:  L324.92
You save:  L92.85
Kč1,174
List Price:  Kč1,643.69
You save:  Kč469.69
Ft18,283.73
List Price:  Ft25,598.69
You save:  Ft7,314.95
SEK kr545.79
List Price:  SEK kr764.15
You save:  SEK kr218.36
ARS$43,729
List Price:  ARS$61,224.11
You save:  ARS$17,495.10
Bs347.11
List Price:  Bs485.98
You save:  Bs138.87
COP$197,925.35
List Price:  COP$277,111.33
You save:  COP$79,185.97
₡25,432.40
List Price:  ₡35,607.40
You save:  ₡10,174.99
L1,235.97
List Price:  L1,730.46
You save:  L494.48
₲372,674.68
List Price:  ₲521,774.38
You save:  ₲149,099.69
$U1,931.55
List Price:  $U2,704.33
You save:  $U772.77
zł201.70
List Price:  zł282.40
You save:  zł80.69
Already have an account? Log In

Transcript

As you see, I copied the character and the platform on this background shape I created. And it's just for reminding me all the time that I want and test it all the time that I want the corruptor somehow blending and also in the same hand stand out from the background, it is what I was talking about in the previous lesson that the background has to support the character so they have to be the same style, they have to fit together. So the viewer has the feeling that okay, this is the same game, but this piece is active and these pieces inactive background. So, it is now just for here as a reminder, whatever you create now in this lesson is a simple for us background for this corruptor and then I will make some other versions of that. And how we do that. Remember in the previous lesson we were talking about background middle ground foreground, we will do the same.

So first we will have Background then you will have a middle ground with some objects. And then in the foreground is actually my little guy and his platform and all the octave elements. I just signed them like this. So this is just like sketch for my finger so you can imagine you can imagine what I will create I always do sketches on paper but I don't scan them I don't make them like you know perfect sketches I'm we'll talk about why sketches are important in another lesson. Basically, what you can do now is on a piece of paper, just know how you would imagine the background with everything with the trees and everything and the little corruptor in it. And what we will do now is create the different Important the background.

So I want this the background part of the background. Okay, you know what I mean? So the one which is totally in the background and inactive, I want it tileable so it's repeating and I want it to be just all threes and some mountains. So I can do it like, let's throw some mountains. If this is my basic shape, my basic background you can create nice mountains using the Bezier tool. Busy for you just click I decided the best Wrong calories.

This type of sky blue can give you the gradient This is the background then these mountains can be also having a gradient from this color to something dark make this transparent again. So what I have now is distant mountains and foggy mountains and now I'm just control clicking on those hills. And with the control click you know we were talking about this earlier but I always have to tell it, so neat little trick. With Ctrl Click you change the node from a square to die. Want or the opposite, so you can add some bumps and curves to your design. Same gradient apply to this one.

Oh, just the opposite is set to zero accidentally need to know that in Inkscape if something is is not visible, then it just might be the same color as the background, or the opposite is zero or the alpha value of the color is set to zero. It's something nice to know. This is what if I have the accident Something is not visible, I know where to look. So I have these two type of mountains. And I want some little bushy trees on the bottom and close this part. And I also want some clouds.

Just to create this one, I will use the spray tool. The spray tool is perfect for sculpting seamlessly, seemingly random shapes. So exactly when I want to create a little folk, I just select this object and go to the spray tool I set up the weed the amount, rotation of the object at a circle, it doesn't matter. The more is the rotation the more random the rotated objects will be. Scatter and focus is also for randomizing you're spraying and these green icons are for if I want to create copies of the same object, if I want to make Chrome's or if I want to create one single object after I did the spraying, so now I just want to create some clouds. I make them red so they will be visible on my design.

And scale is nicely set with I make a bit lower and higher demo and these are individual objects. If I zoom in, I see that these clouds are nicely auditable. If I switch the view to outline, you will see how many objects I have. With console five I switch back to view And I can play with them. When I usually do clothes like this I when I'm happy with the shape I just merge it together. Give it a nice color, not very wide.

But I mean the color picker I yes. Just a neat little bright blue, make it a bit more bright. Okay done. And let's make another type of clouds because making using over the same object is not a very good idea. I think you always have to have some a bit of extra work to make your game seem a bit more random. So you can do like three different clouds randomly changing stuff like this, you know what I'm talking about.

So don't always repeat the same color. But even like now it's a it seems a bit more on them. So it's working and Now I will use the same exact method to create the forest here and that will just be taking this making it even smaller making the amount even more it will slow down your machine but don't be afraid to oversee it. You see I make the brush a bit bigger, which means that be good amount of stuff is coming out every second I'm holding the mouse but they were scattered in a bigger amount in a bigger surface just roughly going on even more I just tried to randomly having fun with these dots, and really just connect everything so none of them is standing on its own. And then I just fix it. And now, just to make it even bigger, I have a bigger bowl.

I sell like that. And they fill up this bottom part we just bigger balls, it won't be visible anyway. You will see in a second what I'm creating, basically I want to create one shape which looks very random to have the effect of Yeah, of how random forest is. I just selected all these hundreds of objects. And now I would control plus i merged them into one object. That's perfect.

Then I create forest color from it. I can because it's a far distant, I can also create a color between the green and the blue. So I pick a nice, light blue green. And I make it a bit bluish by using the color of the background. That's nice. And here on the background, I can again add another layer of this and give some of these green and disappear.

I sent it too much to the back. Yes, and that can give this one a brighter color as it is coming towards us. So, something like this. And here is one little trick I want to show you, because I want this one, this very background very dark, far away background, I want this one repeating. So what I will do is I duplicate my object two times here, I duplicate my object, I check where it is caught exactly here and where I can just do it like this. And then I move it on the other side and I use division to cut it into two pieces.

And this one comes here, Shift Ctrl A, I align the I open the line window, and that comes to the side. So what's happening? I have to make some trees also here so the forest is continuing, but what is happening now If I select all these and make it one group, so it is easy to move. If I select all these, and I title it, it's just one image, I have an endless tileable background. And now I can put my foreground on it. So this is how you make a tileable background, the three keys to match up the two sides of the image.

So I was cutting it in half here, taking this port and putting it on the other side. And it's seamlessly tiling and you can make an endless runner game, whatever platform game you would like to create. So I have now this, one more thing I would do is just maybe a little more of these three like things in the middle. So just hear a few of them. Basically, that's it. So just just make it repeatable, and just make get like a forest in the background.

So that's it, I have this one. And this one I managed together as well Ctrl plus Shift Ctrl G i open with Ctrl G, I closed the group again. So everything is in the group. Let's see how my character is looking on this one. I want them to be this much in the front. With home I put it in the front.

So starting to look fine. I imagine him jumping around and he's clearly visible. And that's neat. I still miss a middle ground. So why we just create some trees and bushes and flowers and descended for the middle ground in the next one and I will show you how we arrange that.

Sign Up

Share

Share with friends, get 20% off
Invite your friends to LearnDesk learning marketplace. For each purchase they make, you get 20% off (upto $10) on your next purchase.