God School Lesson 1

User avatar
thinkslogically
Game Master
Posts: 17223
Location: Florida

God School Lesson 1

Post by thinkslogically » Sat May 18, 2013 2:00 am

God School Lessonsn One: Getting Started

Ok, so the whole point in this tutorial series is to provide some tips and tricks that will allow you to build your own game. This lesson we will be looking at the very basics:
  • Part One: Install GIMP 2.8 from the web
  • Part Two: Basic drawing tools
  • Part Three: Uploading images to the web
If you already have a graphics program that you are happy using (e.g. Photoshop, Coreldraw etc.) then thereÔÇÖs no need to change, just carry on with the assignment and weÔÇÖll see you at the next lesson! If you prefer to use the simpler tools like MSPaint for your assignments, thatÔÇÖs fine too but youÔÇÖll lose access to a lot of the more advanced features that make art-based games so much simpler (like layers & opacity and the like). WeÔÇÖll be using those features in the later lessons.

Part 1: Choose & Install a graphics program from the webs

There is a LOT of choice out there for graphics programs, but the one weÔÇÖre going to use for the purposes of the God School is GIMP (currently on version 2.8).The reasons for choosing this one over all the other options are fairly simple:
  • ItÔÇÖs free!
  • ItÔÇÖs got great functionality compared to the basic programs like Paint
  • It works on most operating systems (Windows, Linux, MacOS)
  • ItÔÇÖs being actively updated
So letÔÇÖs get started:

1. Head over to http://www.gimp.org

Image

2. Click on the download button and choose the download for your operating system (it should auto-detect it so itÔÇÖs first on the list.

Image

3. Click OK to everything and start the installer

Image

Image

4. Put the kettle on while the installer does its thing...

Image

5. Launch GIMP!

Part Two: Basic Drawing Tools
Ok. So one of the first drawing programs most people have probably had experience with would be something along the lines of MSPaint. Paint is a great wee program for covering all the basics and you can make some really cool things in there (LSNÔÇÖs games are all drawn in Paint for example) but they have hardly any of the really useful features weÔÇÖll be drawing on later. By comparison, programs like Photoshop or GIMP have so many features they can be pretty overwhelming when you first load them up.
So for now, letÔÇÖs start with the basics:

1. Opening a new file [File > New]

Image

You can choose whatever size it is you want your image to be, but for now weÔÇÖll stick to the defaults (640 x 400px). Incidentally, this is a pretty good size for images you want to post in the forum.

This is your CANVAS. It is the base onto which you build up your images.

Image

The basic drawing tools (that IÔÇÖm sure you already know about) are the pencil & paintbrush for drawing lines, the paintbucket for filling in shapes, the eraser which is pretty self explanatory and (oddly enough) the selection tools. The large black and white boxes allow you to select the colours you want to draw with, and the tiny black and white boxes below reset the colours to black and white.

Image

Whenever you select a tool, a wee toolbox pops up below which lets you set up the properties of that tool, like the size, opacity, brush type etc. Once (and only once) you select a tool, it opens up its unique toolbox. Each tool has a slightly different toolbox depending on the available options, but letÔÇÖs have a look at some of the options for the pencil.

Mode: This is fairly complex so I wonÔÇÖt cover it in detail here. Suffice it to say that unless youÔÇÖre wanting to apply a particular effect to your brush, IÔÇÖd leave it on normal mode. Dissolve can be pretty cool though if you want a spatter-gun effect for the brush or spraycan.

Opacity: This essentially sets how ÔÇÿsee-throughÔÇÖ your brushstroke is. If opacity is set to 100% (default) then your paint will be completely opaque. Making it more transparent allows you to ÔÇÿstackÔÇÖ brush-strokes on top of each other so that overlapping sections appear more opaque, like this little guy caught in the spotlights:

Image

Brush Shape: Click on the brush shape icon, and you get a whole variety of choices. There are circles, fuzzy circles, x's, and you can even make your own brush shape.

Image

To make your own brush shape, open the brush tools by selecting Windows > Dockable Dialogs > Brushes (Ctrl-Shift-b), then click on the ÔÇÿnewÔÇÖ icon at the bottom:

Image

You'll have the option of making a new brush. It can be a circle, a square, or a diamond.
Radius controls how large the brush is, spikes gives you extra points for the square or diamond, and hardness changes whether the edge is hard or soft (though you should remember that pencils will always have a hard edge, no matter how soft you make it, and paintbrushes will always have a slightly soft edge, no matter how hard you make it).

Aspect ratio squashes the brush, in case you want an ellipse or a rectangle or squished diamond, angle rotates the brush so it doesn't always need to be level, and spacing determines how far you move the brush before it prints another on the page. If you don't know what that means, set the spacing to about 100 and try drawing something with that brush. You'll soon see what it does.

Size: This oneÔÇÖs easy! Scale changes the size of the brush. The units are in pixels.

Image
Brush dynamics set out how the brush will draw ÔÇô again, there are loads of options here, and the easiest way to get a feel for what they do is to try them out!

2. Making a drawing

Image

This is dead easy! Just grab a brush and make a drawing. These two happy goblins were drawn with the pencil (left) and paintbrush (right) and then filled in with the bucket. Notice how the guy on the right hasnÔÇÖt filled in all the way? ThatÔÇÖs because the pencil tool draws lines with hard edges and the brush draws them with soft or graded edges. The fill tool only colours the area that is the same colour as the one you clicked on. So when it meets the soft edge of the paint tool, some of it is left uncoloured. When it meets the hard edge of the pencil tool though, nothing is left uncoloured. I would estimate that for 99% of the drawings youÔÇÖll want to make for forum games, youÔÇÖll be better off using the pencil (especially for sprite-based games) but the choice is yours and both can be used to great effect.

3. Great. Now whereÔÇÖs the straight-line tool?

Image

This is where people start to miss the simplicity of Paint, but itÔÇÖs dead easy once you know how. To draw a straight line, select your drawing tool and click where you want the line to start. Hold down the shift key (may be different on a Mac) and click where you want it to end. Voila!

4. Ok... But what about boxes and circles?

Image

Slightly more annoying to draw, but still easy once you know how. To do this, you need to use one of the selection tools to draw the shape you want. Make sure the colour you want is selected in the colour picker, then go to Edit > Stroke Selection and youÔÇÖll be offered a dialogue box. Set the line thickness etc. to whatever you want it to be and youÔÇÖve made yourself a shape!

However, youÔÇÖre still left with a selection box in your image, so unless you want to only draw inside that box, go to Select > None to clear it.

5. Got it! Now how do I show everyone my masterwork?

Image

First thing you need to do is save the file. Now with GIMP, if you go File > Save As like normal, you will only be able to save your image as a .xcf filetype (native GIMP format). To save as something more normal you need File > Export.

Name your file and save it as a .PNG filetype (you need to type .png after the filename). WeÔÇÖll talk about filetypes more later, but for now just go with this one. Select all the defaults and youÔÇÖre done.

Part Three: Uploading to the Internet

There are lots of image hosting sites out there, so if you already have a preference feel free to use that. I like imgur.com because you donÔÇÖt need an account if you donÔÇÖt want one and itÔÇÖs less annoying to use than many others (like imageshack for instance).

Anyway, head on over to http://www.imgur.com or wherever and get your image uploaded:

Image

Once itÔÇÖs online, click on your image if it doesnÔÇÖt open automatically, select everything in the BBCode box, copy it (Ctrl-C) and paste it (Ctrl-V) into a forum post:

Image

And itÔÇÖs as easy as that!

Now, go and get your assignment. Next lesson we move onto using Layers.

------------------------------
► Show Spoiler
Last edited by thinkslogically on Wed Mar 05, 2014 4:40 am, edited 5 times in total.

User avatar
thinkslogically
Game Master
Posts: 17223
Location: Florida

Re: God School Lessons: #1

Post by thinkslogically » Sat May 18, 2013 7:36 am

I should mention as well - if you have any questions about the lesson or run into problems you can't solve, please post them in this thread. Leave the assignment (game) thread just for the assignments.

User avatar
GathersIngredients
Discussion Moderator
Posts: 5147

Re: God School Lessons: #1

Post by GathersIngredients » Sun May 19, 2013 6:56 am

Since I had a little trouble getting the right version of Gimp to download, I thought I'd mention it here, in case anyone else encounters the same problem:

If you have Windows, but use Firefox as your main browser, you MIGHT get offered only Linux versions of Gimp to download. (That's what happened to me.Stupid auto recognition! Interestingly enough, when using Linux AND Firefox, one DOES get the option of downloading a Windows version of Gimp. Now where's the logic in that? :wall: ) You can download them, but you will have trouble trying to install it, as the command files are incompatible or something.

A quick way around this dilemma is simply using the windows explorer for this one download. You will get offered Windows versions of Gimp to download then. :cheer:
Krulle wrote:My bad memory allows me to enjoy positive news far more often!
Excited for the Dungeon Eyes, Ricki and Lara kissing!
► Show Spoiler

User avatar
thinkslogically
Game Master
Posts: 17223
Location: Florida

Re: God School Lessons: #1

Post by thinkslogically » Sun May 19, 2013 10:48 am

Nice one Gathers, thanks for the tip! I use Chrome on my laptop and had no problems with it so that's maybe another option.

Nerre
Game Master
Posts: 4876

Re: God School Lessons: #1

Post by Nerre » Mon May 20, 2013 11:43 pm

Thanks for the warning. For my firefox it worked fine in germany, maybe it is a combination of country code and browser used. On the other hand gathers is german (or at least german speaking too).
:zzz:

User avatar
Arles
Game Master
Posts: 138
UStream Username: sir_arles

Re: God School Assignments: #1

Post by Arles » Wed May 22, 2013 6:29 am

madmartin26 wrote: What do you guys think of the drawing?
I think it looks pretty good. :D
I'd keep in mind the stroke width in some cases (I think the details in the sand and water are to thin), but the sky, stick and clothing look awesome.
Good job!

User avatar
I'mBob
Game Master
Posts: 2102
Location: The Holy Land

Re: God School Assignments: #1

Post by I'mBob » Wed May 22, 2013 7:08 am

Nerre wrote:Bob, you want to be my awesome dragon mount? You got the perfect color and you are cute but still a powerful dragon. XD
CUTE? I'M NOT CUTE!

Image

[mod="M0rtimer"]Both this and the post have been moved on request. Please keep the assignment thread for assignments only. :)[/mod]
► Show Spoiler
This account is on a hiatus until unknown.

User avatar
GathersIngredients
Discussion Moderator
Posts: 5147

Re: God School Lessons: #1

Post by GathersIngredients » Thu May 23, 2013 1:34 am

I got a couple of questions on lesson one:
Is there a way to change the position a straight line you want to draw is starting from? (Other than the "work-around" of making a line to the point you WANT it to start from and then undo.) Or can you move the straight line after you drew it? (That kind of works with the shape modules, the circle and the square - or ellipsoid and rectanle as the case may be.)

Is there an option to bend the straight lines after painting them? (You can do that in paint.net. Make a straight line in the color, thickness and lenght of your choice and keep manipulating it - starting point, ending point, bend the in-betweens, also still switch color or width - until you are content, then you de-select it and after that you can't edit it anymore. Very handy.)

Is there a way to enter a specific color (e.g. color=#8080BF codes) somewhere into the system?
Krulle wrote:My bad memory allows me to enjoy positive news far more often!
Excited for the Dungeon Eyes, Ricki and Lara kissing!
► Show Spoiler

Nerre
Game Master
Posts: 4876

Re: God School Lessons: #1

Post by Nerre » Thu May 23, 2013 1:50 am

Moving/bending/transforming shapes and lines rather sounds like object management or vector graphics. In raster graphics programms it typically works by moving a layer. Often, an area or object you copy+paste becomes a new layer, so it might seem as you can move each objects. But actually all operations happen in layers, so if you draw a line you draw it in one layer. Therefore, you can only move it by either moving the whole layer, or by cutting out the line and paste it in a seperate layer.

I don't know much about Gimp, but that is the way it works in most raster graphics programs like Corel Draw, Photoshop, Picture Publisher, MS Paint, etc.
On the other hand, some programs use a mix of both, vector graphics and raster graphics, so maybe Gimp does too.

Maybe somebody can quote this so Gather can read it, I think I am still ignored by him.
:zzz:

User avatar
LooksAndSmiles
Game Master
Posts: 1364

Re: God School Lessons: #1

Post by LooksAndSmiles » Thu May 23, 2013 2:36 am

GathersIngredients wrote:I got a couple of questions on lesson one:
Is there a way to change the position a straight line you want to draw is starting from? (Other than the "work-around" of making a line to the point you WANT it to start from and then undo.) Or can you move the straight line after you drew it? (That kind of works with the shape modules, the circle and the square - or ellipsoid and rectanle as the case may be.)

Is there an option to bend the straight lines after painting them? (You can do that in paint.net. Make a straight line in the color, thickness and lenght of your choice and keep manipulating it - starting point, ending point, bend the in-betweens, also still switch color or width - until you are content, then you de-select it and after that you can't edit it anymore. Very handy.)
Just as Nerre pointed out, what you are asking for is generally considered as "vector graphics", while Gimp mostly does "raster" graphics.

In this regard, it is a little behind on professonial vector graphic tools (CorelDraw, or if you want something free try InkScape), but it has some stuff you can use, even if it's a bit awkward. There is a "Path Tool" what you can figure out how to use, or can wait until the appropiate lesson goes up, it is on the list. I can't write up a quick guide right now, I'm sorry. :(

Quicker than Quick Guide:
1. You get to Path drawing by clicking on the icon in the second line, or you can press "B".
2. Click on the window which has "Layers / something / Paths", which has the layer tabs on top by default. Change it to the "paths" tab.
3. Start putting down points, which then connect into lines. you can then make these lines curved by moving them. Be careful though that these will become Bezier curves, and those are a bit harder to adjust than a "simple" curve you might be used to in MsPaint or such.

4. These paths wont appear on the screen as long as you don't strike / draw them out. There is a nifty icon on the bottom for it, or you can find it in the menu (EDIT, and the last in the 3rd section), or by right clicking on the path on the Layers/Path Window. You can strike the path out with the basic "striker", or you can opt to choose to strike it with your current brush / pencil, which can achieve pretty cool effects.
GathersIngredients wrote: Is there a way to enter a specific color (e.g. color=#8080BF codes) somewhere into the system?
When you edit a color, it has a "HTML color" field, that works exactly what you wish to do.
Image

Please ignore the alien language.
Inventing forum games since '10 ...
Skill Table Cheat Sheet for my players in the Minesweepers game.
Random dragons I help growing up:ImageImageImageImage And my own dragons are here. The hatched ones like the clicks! :D

User avatar
thinkslogically
Game Master
Posts: 17223
Location: Florida

Re: God School Lessons: #1

Post by thinkslogically » Thu May 23, 2013 7:27 am

For lesson one, there's no easy way (just erase and redraw) but we will cover layers in lesson 2 and paths in lesson 6 or 7 or so. What L&S says is great though, so if that helps then give it a shot :)

User avatar
M0rtimer
Global Moderator
Posts: 14109

Re: God School Lessons: #1

Post by M0rtimer » Thu May 23, 2013 7:48 am

Yeah, L&S handled that good- I have nothing else to add to it- Though yes, you could move the line through the use of layers- That's what the right side is for. One of the buttons should allow you to make an additional layer, and it's also possible to paste in objects as a layer by right clicking and using paste as... layer. That will be fully covered in future lessons though. :)

Nerre
Game Master
Posts: 4876

Re: God School Lessons: #1

Post by Nerre » Thu May 23, 2013 9:10 am

Just a general question: Do we get grades at the end, or is it pass/ don't pass? Or is it just for fun and the next lesson will come anyway? I am curious about it.
:zzz:

User avatar
LooksAndSmiles
Game Master
Posts: 1364

Re: God School Lessons: #1

Post by LooksAndSmiles » Thu May 23, 2013 11:00 am

Nerre wrote:Just a general question: Do we get grades at the end, or is it pass/ don't pass? Or is it just for fun and the next lesson will come anyway? I am curious about it.
You get a scoring in the X / 100 style for each lesson. You have to pass each lesson individually and you have to fulfill a minimum cumulative scoring on the total of lessons, which is higher than the sum of the minimum individual scores. We have both layman and professional judges for this school and your scores will be kept secret so you should always try to give your best.

Each participant that does not meet the requirements at the end will have to use a hand-drawn poop as an avatar for a week, will be mercilessly laughed out throughout the Games subforum, all their currently running games must allow the players to cheat whatever they wish for the next 3 updates and will be banned from making new games for the current year.

I may or may not be telling the truth, though. ;)
Inventing forum games since '10 ...
Skill Table Cheat Sheet for my players in the Minesweepers game.
Random dragons I help growing up:ImageImageImageImage And my own dragons are here. The hatched ones like the clicks! :D

User avatar
thinkslogically
Game Master
Posts: 17223
Location: Florida

Re: God School Lessons: #1

Post by thinkslogically » Fri May 24, 2013 2:06 am

As fun as l&s's way sounds, it's all just for fun :-) there may be awards as we go through or at th end, but we haven't really discussed it much. Is it something you guys want?

Nerre
Game Master
Posts: 4876

Re: God School Lessons: #1

Post by Nerre » Fri May 24, 2013 2:16 am

I don't need it. I was just asking, cause I wanted to know if it was for fun or if we could "loose" and get thrown out during the lessons.

Since people have different backgrounds and experience with graphics, I don't think we need a ranking. While it boosts the ego of those who are already good, the ones who are beginners would often be trailing behind. But we are here for fun and learn, not to compete. Sometimes a cute or funny picture with worse execution is better than a perfectly drawn one. For example, I think Bobs dragon is really cutefabulous.. :)

But I don't mind a rating system, if you want to bring one up.
:zzz:

User avatar
thinkslogically
Game Master
Posts: 17223
Location: Florida

Re: God School Lessons: #1

Post by thinkslogically » Fri May 24, 2013 3:48 am

It wasn't my intention to rank anyone's work or judge it in any particular way, but we could potentially have a class vote along the way for things that you guys think are worthy of note :) But I wasn't planning anything.

User avatar
thinkslogically
Game Master
Posts: 17223
Location: Florida

Re: God School Lessons: #2

Post by thinkslogically » Fri May 24, 2013 2:51 pm

Lesson Two: The path tool, layers & file types.

For this lesson, weÔÇÖll discuss some more advanced tools you can use to build up your game and introduce you to using layers. Trust me, when it comes to drawing up a forum adventure, layers are your friend!

BEFORE WE START, THIS IS IMPORTANT!

Saving a file with Layers
If you want to preserve the layers in your image, make sure you save the file as a native .xcf file (in Gimp). This keeps all your data about layers, transparency etc. so you can go back later and modify them. MAKE SURE YOU DO THIS!! (File > Save As).

For web use & sharing, you still need to save a flat .png version though as before (File > Export), so youÔÇÖll usually end up with 2 copies of every image you make for a game. Just remember you canÔÇÖt access layers again via a .png (or .jpg etc.) filetype so BE CAREFUL you donÔÇÖt lose loads of work!


Part 1: Using Layers
A layer is just what it calls itself: a layer of an image. Imagine you make a background of fiery hell, a floor of red marble, and a pair of demons fighting it out. But then you want to be able to move the demons around and reposition them or redraw them, without having to constantly redraw the background where they were previously standing.

Well, layers can do that. Draw the demons on a layer separate from the background. Then, when you want to change where they are, you just move their layer. The background stays where it is, and you don't need to redraw it.

Layers have other wonderful qualities as well. Want to darken a normally lightened room? Just make a full black layer, and turn down the opacity. Your scene gets flooded underwater? Blue layer and turn down the opacity.

And it can help a lot, when putting things behind other things. Here's a few examples:

Putting stuff in front of and behind other stuff.

In this example, weÔÇÖre going to build ourselves a lair (getit?). I fancy a wee underwater world today, so letÔÇÖs put it together.

To start IÔÇÖm going to make a nice underwatery background. By setting the foreground and background colours to something watery and using the gradient tool I can make a nice graduated underwater scene.

Image

Lovely. But I donÔÇÖt feel like swimming all the time, so letÔÇÖs add a seabed and some stuff. IÔÇÖm going to do this by adding a new layer (Layer > New Layer) for each set of things I want to add. Set the layer fill type to transparent if you want it to be see-through, or you can fill it with the fore- or background colours. Transparency is shown in Gimp by a checkered background of light and dark grey tiles.

To keep track of your different layers, you need to open the layers window. Go to Windows > Dockable Dialogs > Layers (Ctrl-L) and it will appear. You can click and drag the little tab over to the main toolbox if you want to keep things neat, but itÔÇÖs up to you.

Image

So by the time IÔÇÖm done, my layers are:
  1. Seabed
  2. Seaweeds
  3. Shoal of fish
  4. Hextapus
  5. My messenger ghost guy

    Image

    Moving layers and changing their order
    The layers toolbox shows you which layer is on the top. In this image, my Ghost Guy is the top layer, so heÔÇÖs in front of everything, and the background is on the bottom so itÔÇÖs behind everything.

    But what if I donÔÇÖt want my Ghost Guy to be in front of stuff? Maybe I want to have him hide behind stuff. To fix that, I select the Ghost GuyÔÇÖs layer and drag it down so itÔÇÖs underneath the octopus.

    To move him, around all I do is select his layer, click on the move tool and then drag him to where I want him to be. Note that this WILL NOT work if you click on a transparent area of the layer - you MUST use the move tool on the part of the layer where you've drawn something. There we go, now heÔÇÖs hiding behind the octopus!

    Image

    But layers can do more than just alter where your drawings appear ÔÇô you can also use them to add effects to your image. To make this scene extra underwatery, IÔÇÖm going to make a copy of the background layer. I can do this by right-clicking on the background gradient layer and selecting ÔÇÿDuplicate LayerÔÇÖ.

    Image

    Which gives us this:

    Image

    Then select the new layer (if itÔÇÖs not already selected) and reduce the opacity until it looks nice.

    Image

    There we go!

    Flipping & rotating layers
    So as youÔÇÖre probably noticing, layers save you a LOT of drawing time! If you can just take different elements and change them one at a time, you donÔÇÖt have to constantly redraw backgrounds every time, or keep hundreds of different sprites wearing every possible combination of gear your players can think of! If you have your ÔÇÿnakedÔÇÖ sprites as one layer and then keep each item of equipment as a new, separate layer you can mix and match as much as you want and it only takes a couple of minutes to change.

    Ok, so for this example IÔÇÖve brought in some outside help. As you can see, Balthazaar isnÔÇÖt too impressed at being forced to come and help out here when he could be squishing puny mortals over in Escape! but weÔÇÖll see if we canÔÇÖt improve his mood with some snazzy new clothes.

    Image

    As you can see, weÔÇÖre starting with a background layer on a gradient again, and then the next layer is Balt. Now, notice the eye symbol next to each layer? When thatÔÇÖs visible it means that layer is also visible. If thereÔÇÖs no eye, the layer is hidden. As you might notice, IÔÇÖve got 2 more layers drawn there that I don't want you to see yet.

    Image

    If I make them visible, we can see BaltÔÇÖs new wardrobe!

    Image

    But having all those layers names as ÔÇÿLayer #1ÔÇÖ, #Layer #2ÔÇÖ etc. really isnÔÇÖt that helpful, especially once you start making loads of them, so letÔÇÖs rename them. Right-click on a layer, then click on ÔÇÿEdit Layer AttributesÔÇÖ and change the name to anything you like:

    Image

    Ok. So now weÔÇÖve got the layers organised properly, letÔÇÖs move the clothes onto Balt. Again, I select each layer one at a time and use the move tool to position the clothes on top of him.

    Image

    Lovely! But he still doesnÔÇÖt look that impressed does he? What if we flip the hat around so the featherÔÇÖs on the other side? For this go to Layer > Transform > Flip horizontally.

    Image

    Nope that didnÔÇÖt help... What if we try a more jaunty angle? Go to Layer > Transform Arbitrary Rotation then select some value that seems about right. IÔÇÖve gone for -30. Hit ok and then I need to reposition the hat and weÔÇÖre done. Cool. Watch out though ÔÇô every time you use the arbitrary rotation tool the image will get a little more fuzzy and distorted. Try not to rotate rotations and keep an original version of your layer that you can keep going back to.

    Image

    Finally though, I want to bring Balt (and his new wardrobe) back into the middle of the image. Rather than do this one layer at a time, I can move them all at once by ÔÇÿlockingÔÇÖ the layers together:

    Image

    Hover your mouse to the right of the eye symbol on one of your layers and youÔÇÖll notice thereÔÇÖs a hidden box in there. If you click on it, it turns into a chain symbol which locks each marked layer together. If I lock the layers for Balt, the snazzy coat and the snazzy hat, I can move the whole lot around at once:

    Image

    If I wanted to, I could use Layer > Merge Layers instead to permanently fuse them together, but I wouldnÔÇÖt be able to undo that (i.e. I could never take that hat off Balt without redrawing him).

    NOTE: When you create a new layer, it is automatically made to be the same size and shape as the canvas. When you move a layer around, it stays that size and you effectively end up moving a rectangular selection box around which might be fine, but is a pain if you want to draw outside the original layer boundaries. Fortunately you can reset the size really easily by going to Layer > Layer to Image Size (or one of the other options if you prefer). This resets your layer to the canvas and you can draw wherever you want again.


    Part 2: File Types

    NOTE: This is lifted straight from the original God School thread and comes from Ratha, whose knowledge of this stuff was far better than mine!

    The possible types of images are numerous, and the only reason you need to know is so that you don't make it hard on others and yourself to edit your work. For that purpose, I'm split this lesson into two halves, the quick and easy half, and the longer in depth half.

    The quick version!

    If you want to:
    1. Save a pixel by pixel perfect picture and take up huge amounts of space - use .BMP
    2. Save a photograph, and don't mind a little decay in the quality - use .JPG
    3. Save a picture for the internet, use .PNG
    4. Make an animated picture, use .GIF
    5. Save a long term gimp project, use .XCF (Photoshop uses .PSD files)
I've excluded plenty of types, but these are the ones I have a fair amount of knowledge on.

And now, the in depth version, for those of you who actually want to know why (I make no pretensions to any of the historical facts being true, but they are the best I could learn by sleeping through the appropriate class):

.bmp
In the beginning there was the bitmap, and it was good. It saved the pictures, pixel by pixel. But there was a great downside, for each pixel needed its own piece of memory, and this took up a lot of space! And lo, it was declared that it was too much, and the people sought after compression algorithms to alleviate their memory usage, but there were problems, for they could not come up with a version that did not eventually destroy the picture...

.jpg
And so it was, that the jpg was made. It compressed the data contained in the picture, but at the cost of the picture's quality. And it did rightly suck for editing and re-editing a picture! For each time it was saved the quality would sink again, and the people did say "We want one that doesn't do this" but they still accepted it for saving photos.

[Note from Thinks: This is probably the most common type of image file for most people, since for things like photographs itÔÇÖs pretty ideal. Unfortunately, it will look awful if you save your game files as jpegs. HereÔÇÖs an example:
Image

The difference isnÔÇÖt too obvious from that, but you can see it better if we zoom in:

Image

You can see how much cleaner the png file is compared to the jpg.

A couple of the avatars you guys made for the last assignment were posted as jpegs rather than .png files and the difference in image quality is quite noticeable when you know what to look for (or if youÔÇÖre editing those images yourselves like I did when I made your class photo). Also, because of the degradation, it will be very difficult for other people to use your work in a sprite game if you save as a .jpg.

.gif
Image

The gif was then devised as a lossless compression type, and it was good, for it allowed animation and stuff! And then the people began to use it, and enjoyed it greatly. But great evil lurked in its depths, for someone held the patent on it, and while people got used to the gif, the patent holder lurked, and when the time was right, they demanded their cash for the use of the gifs... and the people were despaired! They were told to wait until the patent expired in 2004! But the people were impatient, and cried out for a system they could use until then. And it came...

.png
It came in the form of the portable network graphic, which was also a lossless compression type. And the people rejoiced! The png had many great and new features, and all they needed to give up was the animation. They could store their pictures, and not worry about the gradual decay. And so they bided their time until 2004, but by then were so used to the wonders of the png, that they often would only resort to the gif for animation purposes.

.xcf
After a while came the gimp, and it was small and without features... but over the years it improved, and features were added, until it became great and powerful. But the gimp needed to store more than simply the image it had been given. It needed to know what was on each layer, where the paths were, what the layer transparencies were left at. And so it brought with it the .xcf, a type that one might save to while they were working on the picture until they were ready to post it, at which point they might save to another type like the png. So might they easily edit their work!

-------------------------------

Great! That's us done with Lesson 2! Go and get the assignment done and then for the next two weeks we'll have Arles teaching you how to bring your new skills together to make a freestyle adventure like Memories or Escape!

User avatar
LooksAndSmiles
Game Master
Posts: 1364

Re: God School Lessons: #2

Post by LooksAndSmiles » Fri May 24, 2013 6:55 pm

I think it would benefit the readers greatly if either

a) each lesson and assignment goes into a different thread, or

b) you put an index into the opening post, with the link of where the indexed lesson / assignment starts.
Inventing forum games since '10 ...
Skill Table Cheat Sheet for my players in the Minesweepers game.
Random dragons I help growing up:ImageImageImageImage And my own dragons are here. The hatched ones like the clicks! :D

User avatar
thinkslogically
Game Master
Posts: 17223
Location: Florida

Re: God School Lessons: #2

Post by thinkslogically » Fri May 24, 2013 11:54 pm

You're quite right, and an index thread is on its way!

If the mods are able & willing to split this thread and set up a sub-forum where past lessons (& discussion) can be found that would be great too. I don't want to spam the forum with 25 lesson threads without having somewhere else to store them though.

User avatar
LooksAndSmiles
Game Master
Posts: 1364

Re: God School Lessons: #2

Post by LooksAndSmiles » Sat May 25, 2013 5:02 am

I think the lessons part could take a great place in the resources thread, yeah, maybe in its own subforum.
Not neccessarily right now, since it gets more visibility here, but when it's finsihed then it could be moved. :)
Inventing forum games since '10 ...
Skill Table Cheat Sheet for my players in the Minesweepers game.
Random dragons I help growing up:ImageImageImageImage And my own dragons are here. The hatched ones like the clicks! :D

User avatar
thinkslogically
Game Master
Posts: 17223
Location: Florida

Re: God School Lessons: #2

Post by thinkslogically » Sat May 25, 2013 9:58 am

Definitely, that was the plan :) I think the index thread will be ok for now, then when we get it all finished up we can get the mods to move it into resources for us.

User avatar
M0rtimer
Global Moderator
Posts: 14109

Re: God School Lessons: #2

Post by M0rtimer » Sat May 25, 2013 6:24 pm

M0rtimer, your sprite is beautiful. I've heard it said that where a picture is worth a thousand words, sprite art is the equivalent of poetry, communicating as much as possible in as few words as possible. And your sprite is a great poem. I'ma study the hell outta that poem.

Going overboard, eh? I can't WAIT to see this :D
Thanks! Yea, I think it's a pretty unique style- The fact that it usually doesn't use any lines can make it hard to use at times though, especially if you want to use white clothing like Paradox does, since then you have to make sure to contract it against a decent background.

While I do think the style is unique and the end result is a very nice looking scenery, just regular, LSN-styled sprites are far easier to do. And if I make a future image-based game, it's probably going to be like that.

Still, I did give running the game in this style a try. Sadly, it was on the old board, so it all sort of got eaten up... All the pictures are saved on the internet though. If you're serious about "studying" it, I'll include a few of the pictures below.
► Show Spoiler
► Show Spoiler
► Show Spoiler
(Note to self about last picture- Learn how to draw bushes)

Sadly I never actually got around to the epilogue for that game... I was stuck in a position where I'd either very, very slowly worked towards finishing that, or spend time on a less time-consuming game instead, and I opted for the second.

edit: And I also now noticed there is an art error in the first image as well. Did I upload it like that originally? I guess we'll never know...

User avatar
Ratha
Whispers Softly
Posts: 49

Re: God School Lessons: #2

Post by Ratha » Sat May 25, 2013 11:12 pm

Oh god, M0rt, those are gorgeous! Absolutely 100% drop dead gorgeous.

Ummm... I'm kind of afraid to ask this, but...

I was never really known for having my own style. Last time I was here, I cribbed LSN's style, and modded it to my own use. Do you think I could steal yours this time around? With a few modifications of course, because I'm me and have a slightly different personal style, but...

I've been hesitating to start the actual visual designs of the labyrinth currently in my head because I wasn't certain what visual style I wanted to go with. Yours has me feeling inspired.
He has returned, one of the great old ones, and has caught up on goblins, still thinking "Holy Sonuvacrap! PsiMinMax!"

User avatar
LooksAndSmiles
Game Master
Posts: 1364

Re: God School Lessons: #2

Post by LooksAndSmiles » Sun May 26, 2013 2:23 am

Ratha - I mean THE Ratha - inspired by other peoples work and not the other way around?

World's gonne madde.
Inventing forum games since '10 ...
Skill Table Cheat Sheet for my players in the Minesweepers game.
Random dragons I help growing up:ImageImageImageImage And my own dragons are here. The hatched ones like the clicks! :D

Post Reply