Fraxy Compendium

 

Tutorial: Creating a Background

Page history last edited by Peardian 1 yr ago

 

Daijitsu's unofficial background tutorial

 

-note-

I understand that this subject is considered less advanced, and a good number of you have probably figured this out on your own (or worse, someone beat me to the tutorial and I didn't see it), but everyone starts somewhere, and this can be a daunting task for some to take up on their own. Even so, advanced users can probably use some advice from the topic for ideas and resources, so keep reading if you have the time.

-/note-

 

 

Getting started

 

First thing's first- you have to select your theme. If this is a casual background for your own personal use, feel free to do whatever, but if you're making a TRY file, try and keep it professional. Follow these guidelines for the best results-

 

 

[professional route]

Once you have an idea in mind, you need to think- What would suit this idea best? A nice resource to visit when you begin searching for images is probably "Absolute Backgrounds", which is a basic website hosting over 5 thousand different images, all of which are small in size (less bg-related lag in-game, + small download), and TILEABLE.

  • What's tileable, you say? the image, despite being small, can loop over and over from one edge to another, making it seem like it's a much larger image (and preventing easily noticed picture edges from showing up all over)
  • although it is USUALLY a good end-result, be careful if a picture has a large, easily recognizeable section. If you have something that stands out a lot, it ruins the effect.

 

Once you have a base image, you have to think about what you want your scene to look like overall- you've probably noticed in the default BG sets, there's a second layer that floats around at a different speed than the other, making the scene feel more like you're in 3d space, and not just on top of a flat picture. Your second image, should you choose one, should be VERY minimal, and that's for good reason- It should be MOSTLY black/dark, with highlights here and there. Black areas are transparent, and the lighter the color, the more visible it is. The easiest to use choices are clouds and grids of sorts, but you are more than free to experiment with different pictures. Just like the main BG, this should prefferably tile.

 

 

[For the helluvit route]

well, the final result is up to you, but I suggest reading the Professional route above if you haven't to get the idea. I personally have a few 'WTF' background sets I've made, and the ideas remain unchanged from above-

  • You want to TRY to use something tileable, but it isn't really necessary unless it bugs you a lot.
  • large images are OK for this, just make sure your computer doesn't lag-out when you run with a gigantic image.
    • GIGANTIC images have a major drawback if you actually want them to tile- when you hit the edge, it doesn't tile- instead, it starts a 'trippy' effect where there's nothing but visual echoes of the edge of the image and anything that passes over the deadzone. Once the picture you were on is completely off-screen, it will immediately *pop* right to where you should have been sitting on the new tiled image.
      • The above simply put- it WANTS to tile, but it only lets one picture be on the screen at any time, so it waits for you to get off the first to make the second.
      • (Untested in the 7/23 revision of Fraxy)
      • (Zaximillian sez:) This problem seems to start happening at 1024 x 1024 pixels. Still testing...
    • my favorite big picture to use is that of the Earth at Night, which is really nice. Kind of gives you a futuristic feel, while still keeping it at home. Just like mentioned above, though, it has the tiling problem. If it weren't for the tiling, I think it would have looked REALLY cool being able to pretty much travel around the globe and loop back, as if you were actually in orbit.
  • Of course, subject material can be ANYTHING. You can let your imagination run wild, but if you don't have one, I suggest using this. Why? WHY NOT.
  •  

 

-notes on choosing bg images-

  • bright pictures don't do well for you- besides the fact that enemy ships are white and will end up blending into the background, and unless you've changed the enemy bullet colors, you won't be able to see what's coming at you at ALL.
  • most file types will work for you, but keep in mind that files such as animated GIFs will only display the first frame in the animation.

 

 

 

Setting up Files

 

Alright- now that you have your picture(s) lined up and ready to go, we need a place to put them. Simply enough, make a new folder in Fraxy/BG, and name it whatever you want. Probably something related to your background, if you ask me. Place your two files in there. *thumbs up*

 

NOW, the hard part.

 

 

 

make a copy of an existing .FBG file from the BG folder (let's use CLOUD.FBG for this example), and just edit it based on what I tell you below.

 

This is what will be in your file (depending on what languages you have installed on your computer, there may be some gibberish which USED to be Japanese. I actually have Japanese installed as a main language and it STILL does it to me)-

 

 

"FRAXY_BACKGROUND","“Ü‚è‹ó"
"cloudy/cloud_01.bmp", 3000, 3, 0, 128
"cloudy/cloud_02.bmp", 1800, 3, 0, 36

 

ok, now let's explain what's going on with this-

  • "Fraxy_background" is telling the game that this file is a settings controller for a background. Simple enough.
  • "“Ü‚è‹ó" is what the game and config show this background as when you select it from the dropdown menu.

     

  • "cloudy/cloud_01.bmp" is obviously telling the game that this file is what it wants for that line of settings.
  • 3000- this first number represents the distance behind the main 'plane of action'. If your ship and enemies all fly on the plane of action located at 0 Units, the image would be represented as 3000 units away.
    • Why do we need this number? the image remains the same size, so the distance doesn't affect how big it is. HOWEVER, when you move, it moves slower than you do. If you want a real-world example, look out the side of your car when driving past a field- the trees way at the back of the field are farther away, and move slowly in your vision, but things that are closer, such as an animal or a tractor sitting in the field, or trees/a fence right along the side of the road are moving MUCH faster past you, at least from how you see it.
    • what importance does this have? Probably... if you're doing a background with something like the earth behind you, and you want clouds as well, so while you're moving, the clouds will move correctly compared to the ground, creating a more convincing setting and entertaining playthrough.
  • 3, 0, - I haven't taken the time to figure these out, but they haven't shown any importance to what I've been doing thus far. If anyone knows, please edit this!
  • 128- THIS is important. It is the overall transparency of the image. The variable goes from 0-255, 0 being completely transparent and 255 being as solid as the original image.
    • why put transparency on the base image, which has nothing behind it? the null void that exists where images do not creates an interesting 'visual echo', as I mentioned earlier, and if your base image is partially transparent, it will blur when you move. This makes sense in this particular file, since clouds are supposed to be smooth and foggy. duh.
    • working with the SECOND image you have to keep in mind that the image is set to have black as a transparent color and white as a solid, so there's nothing you can do here to make the image as solid as the main picture... but there's no reason to, since you wouldn't be able to see the first one anyways...

 

 

 

Now that you know what's what, let's edit the file to our liking- remember, the file path starts in BG, so instead of something like "C:/documents and settings/users/daijitsu/my documents/games/fraxy/bg/New Folder/New Pic.jpg", you only need to put in "new Folder/New Pic.jpg".

 

I'll edit the previous file so you can see what a new good setup should look like-

 

 

 

 

"FRAXY_BACKGROUND","New BG"
"New Folder/New Pic1.jpg", 2000, 3, 0, 255
"New Folder/New Pic2.jpg", 1000, 3, 0, 75

 

 

Remember to keep the quotation marks where they are, otherwise it thinks of separate words as different variables instead of the full " to " as one variable.

 

I hope that made sense.

 

 

Save the file.

 

 

 

 

Finishing Up

Hopefully you've done everything right up til now, because it's time to go into fraxy itself and see how your new background works. Go to freeplay and then click Option. Select "background" and simply choose your new BG set from the list. If it were the file I set up above, it would be named "New BG".

 

once you have that set up, it should jump into the bg right away. If it shows up black, make sure you spelled the file paths correctly in your FBG file. If you want to continue editing it but hate continually opening and closing fraxy, leave fraxy open on the Option menu. When you make a change to your files and save them, change the background to something else and then back to your own really quick and it will update.

 

 

Thank you for reading my tutorial THIS FAR, but please don't be boring and do exactly what I've told you- go out there and experiment!

 

 


 

RESOURCES

 

Absolute Backgrounds

  • small tileable backgrounds
  • categorized by both color and texture type
  • includes texture generators for gradients, looping text, and advanced texture
  • drawback is that it's based on a free website, so banner ads may sometimes be NSFW

Comments (3)

profile picture

daijitsu said

at 5:17 pm on Jul 24, 2008

I'd like to thank Zax for looking into the tiling issues.

I would also like to ask any and all of you to add websites and other helpful criteria to the new "Resources" section at the bottom of the page!

Anonymous said

at 1:32 pm on Jul 25, 2008

That information isn't confirmed. I still need to play with file sizes and see what effect that has.

Anonymous said

at 7:25 am on Aug 13, 2008

I can't resist saying "So, i herd u liek mudkipz?" for some reason.

You don't have permission to comment on this page.