JS13K Games 2019 Day 28
I'm back to work on my game! Well, I'm actually kinda working on both mine and my friend's game for the competition. I don't mind. It gives me two places to try ideas. Anyway, I just pulled off a manual merge to my fork of jedulz's entry. That was a bit weird to do, but I'm glad GitHub gave me instructions on how to create the branch and pull the merge request. Then, I just used Atom text editor to push the merge on the branch and then merge that branch onto master.
So I went ahead and drew him this plant:
Now, his game looks like this:
Which, I think is a little better looking than that square.
The only time I had today was spent learning how to use the canvas. I think I found something really cool, though. Actually, I found a lot of cool things with drawing images on the HTML5 Canvas. The first one I found was a good example of how the drawImage function works. I'm pretty sure everyone reading this knows how to use that function, but like I said: I'm completely new to the canvas. Then I found out that you can flip images using the canvas! This means that I could try to reduce jedulz's file size on his porcupine, but I'll have to try that later. It will also be helpful when I get my robot spider sprite made, and I can just flip it using "canCon.scale(-1,1);" in Shield Bearer. I also noticed that they were using context save and restore, so I looked it up. It's very interesting: you save the normal context, do a bunch of weird scaling and transformations, draw a sprite with this weird canvas to apply the effects to it, and then restore the context to start drawing other stuff normally! That's awesome!
EDIT: Some might wonder what my drawing tools were. Well, I started the plant using Microsoft Paint. You can see the three colors that I used, and I just randomly put shapes down with the rounded rectangle tool, trying to make the plant look as organic as possible in paint. I then exported that as a PNG. I did run into a problem when I first put it into jedulz's game: it didn't have any transparency. So, I loaded the PNG into GIMP, selected the white parts outside of the plant, and hit delete to expose the transparency layer underneath. It has some advanced settings when exporting the image as a PNG, but I just use the default settings or whatever these are:
There's probably a better configuration to use when trying to save on space, but it got the plant under 2KB. I tried making it smaller in size, but that just doubled the amount of disk space the image used. PNG must use some weird compression algorithm for something like that to happen.
Today, I mostly helped out jedulz and his entry. He was using a big green square for his plant, bush, or whatever his purple food was growing on.
The only time I had today was spent learning how to use the canvas. I think I found something really cool, though. Actually, I found a lot of cool things with drawing images on the HTML5 Canvas. The first one I found was a good example of how the drawImage function works. I'm pretty sure everyone reading this knows how to use that function, but like I said: I'm completely new to the canvas. Then I found out that you can flip images using the canvas! This means that I could try to reduce jedulz's file size on his porcupine, but I'll have to try that later. It will also be helpful when I get my robot spider sprite made, and I can just flip it using "canCon.scale(-1,1);" in Shield Bearer. I also noticed that they were using context save and restore, so I looked it up. It's very interesting: you save the normal context, do a bunch of weird scaling and transformations, draw a sprite with this weird canvas to apply the effects to it, and then restore the context to start drawing other stuff normally! That's awesome!
EDIT: Some might wonder what my drawing tools were. Well, I started the plant using Microsoft Paint. You can see the three colors that I used, and I just randomly put shapes down with the rounded rectangle tool, trying to make the plant look as organic as possible in paint. I then exported that as a PNG. I did run into a problem when I first put it into jedulz's game: it didn't have any transparency. So, I loaded the PNG into GIMP, selected the white parts outside of the plant, and hit delete to expose the transparency layer underneath. It has some advanced settings when exporting the image as a PNG, but I just use the default settings or whatever these are:
Comments
Post a Comment