CTW Window Creation Code Explained

Post here your demos and examples with the source files.
Forum rules
Always post the games with a screenshot.
The file must have the ged and data files (complete game source)
Use the forum attachment to post the files.
It is always better to use the first post to put the game files

CTW Window Creation Code Explained

Postby Hblade » Mon Sep 07, 2009 1:29 pm

CTW Window Creation System
Canvas To Window creation is a mdoerate programming level, but if you read this you have nothing to worry about. You can create your own window styles, and you can use ANY image, as long as the image is 96x96, or since your learning how to make it, you can make your own image sizes.

What can CTW do
CTW can make anythimg from Windows, to option selections, to menu's, to basicly ANYTHING that uses a window in standard games

My text isn't right with the canvas
This is because, unlike the canvas's erase method, the window peices get placed 16 pixels to the left and 16 pixels above the canvas, so if you want the text to be aligned perfectly, you'd make the text's x and y exactly equivelent to the canvas x and y. If you are using any image different then 32 x 32, then it will place the tiles half of its size instead of 16. For example, if your images are 48 x 48, which makes every tile 16 x 16, then it would be aligned 8 pixles instead of 16.

The Image structure
The images all must be like this at first, untill you can learn how to design your own programming methods.
Frost.png
Frost.png (13.9 KiB) Viewed 2429 times


But, there must be 3 tiles x, and 3 tiels y, heres an example.
Window Design.png
Window Design.png (824 Bytes) Viewed 2429 times


Make the animations
Make your window character, as his image, use the window you designed, or use one of these
Frost.png
Frost.png (13.9 KiB) Viewed 2429 times

Eleint Green.png
Eleint Green.png (468 Bytes) Viewed 2429 times

The horizontal frames and the vertical frames must be 3.
Now click on Add Sequence, then add each frame 1 by 1, name them topleft, topmiddle, topright, middleleft, middlemiddle, middleright, bottomleft, bottommiddle, bottomright.

Using the window tiles
In order to use the window tiles, make a canvas and use this code.
Make your variables
Make these variables, make sure there actor variables.
    i
    i2
    i3
    i4
These 4 variables will be used to make the window. Now heres the creation of the windows. My actor's name is "window" so you will need to replace window with your actors name.
Code: Select all
CreateActor("window", "topleft", "(none)", "(none)", 0, 0, false);
CreateActor("window", "topright", "(none)", "(none)", width-32, 0, false);
CreateActor("window", "bottomleft", "(none)", "(none)", 0, height-32, false);
CreateActor("window", "bottomright", "(none)", "(none)", width-32, height-32, false);

This will create the 4 corners, try it out if you like. If your image size isn't 96 x 96, then replace the 32's with the tile size of your image.
Now for the advanced part.
This part is a little bit advanced and can be confusing, but I'll try to explain it.
Creating the top and botom peices
Code: Select all
for(i = 32; i<width-32; i+=32)
{
    CreateActor("window", "topcenter", "(none)", "(none)", i, 0, false);
    CreateActor("window", "bottomcenter", "(none)", "(none)", i, height-32, false);
}

The for statement is a loop as far as I know, the i=32 starts the i as 32 so that it dosnt get created where the corners are, the i<width-32 is to make sure that it constantly will create the actor unless it reaches the right corner peice, the i+=32 adds the i, or the tile's position, by 32, so taht it dosnt create zillions of tiles that will create lag, it only creates a tile after it created the last one. Our window should now look like this.
p1.png

Creating the left and right peices
Code: Select all
for(i2 = 32; i2<height-32; i2+=32)
{
    CreateActor("window", "middleleft", "(none)", "(none)", 0, i2, false);
    CreateActor("window", "middleright", "(none)", "(none)", width-32, i2, false);
}

Just like the first one, i2 = 32, it sets the first tile 32 pixels so that it dosnt collide with the corner tile. This time yous ee height, instead of width. This is because your creating the left and right side of the tiles, instead of the top and the bottom. Our window should now look like this.
p2.png

Filling the rest of it.
Code: Select all
for (i3 = 32; i3<width-32; i3+=32)
{
    for (i4 = 32; i4<height-32; i4+= 32)
{
    CreateActor("window", "middlemiddle", "(none)", "(none)", i3, i4, false);
}
}

The first one, i3 = 32; i3<width-32; i3+=32, sets the first x position, then creates the tiles along the x position. The second one, i4 = 32; i4<height-32; i4+=32 means that it will create a tile for every y position. Our window should now look like this.
p3.png


Now that you made your CTW window designing
You can post your windows here too if you want.
Subscribe to my YouTube? - Yes| No
User avatar
Hblade
 
Posts: 4455
Joined: Fri Dec 08, 2006 11:14 pm
Score: 181 Give a positive score

Re: CTW Window Creation Code Explained

Postby pyrometal » Mon Sep 07, 2009 1:41 pm

Good work Hblade, you get a point from me for showing people this!
SPRITE WARRIOR:
Free, open-source & crossplatform pixel art editor (currently under construction).
User avatar
pyrometal
 
Posts: 706
Joined: Wed Nov 28, 2007 4:07 am
Location: Kingston, ON, Canada
Score: 86 Give a positive score

Re: CTW Window Creation Code Explained

Postby Hblade » Mon Sep 07, 2009 2:12 pm

Thanks pyro :D
Subscribe to my YouTube? - Yes| No
User avatar
Hblade
 
Posts: 4455
Joined: Fri Dec 08, 2006 11:14 pm
Score: 181 Give a positive score

Re: CTW Window Creation Code Explained

Postby cforall » Tue Sep 08, 2009 12:40 am

WHAT'S! ......use tiles to make window......wild originality
Good for you! :D :D
User avatar
cforall
 
Posts: 65
Joined: Thu Aug 06, 2009 2:46 pm
Location: Shanghai
Score: 8 Give a positive score

Re: CTW Window Creation Code Explained

Postby Hblade » Tue Sep 08, 2009 1:42 am

Thanks :D
Subscribe to my YouTube? - Yes| No
User avatar
Hblade
 
Posts: 4455
Joined: Fri Dec 08, 2006 11:14 pm
Score: 181 Give a positive score

Re: CTW Window Creation Code Explained

Postby Bee-Ant » Tue Sep 08, 2009 3:06 am

Wow,i can use this for my newer project :P
User avatar
Bee-Ant
 
Posts: 3723
Joined: Wed Apr 11, 2007 12:05 pm
Location: http://www.instagram.com/bee_ant
Score: 210 Give a positive score

Re: CTW Window Creation Code Explained

Postby Hblade » Tue Sep 08, 2009 5:11 am

Glad you like it, beeant ^^
Subscribe to my YouTube? - Yes| No
User avatar
Hblade
 
Posts: 4455
Joined: Fri Dec 08, 2006 11:14 pm
Score: 181 Give a positive score


Return to Game Demos

Who is online

Users browsing this forum: No registered users and 1 guest