October 9, 2008
third
written by inggaydadyeminay at 02:03 PM .

SANS "RIVALS" 

chunkier, sweeter, nuttier.. goodness...  i love you to bits.

 


{ mood } weeeh with matching pag-iinat


2 collided


October 8, 2008
Mapping Caves
written by undwight at 06:02 PM .

Fast Cave Mapping
A tutorial on mapping caves by Dwight Delleva

The following tutorial can be applied when making other maps using the other cave dungeon tilesets.

You can also read the Portuguese version of this guide here translated by Gemstone.

Note: The picture examples are simply done so you can easily understand the tile's use. 

Contents:
Introduction
Tileset Review
Mapping Caves the Usual Way
Mapping Caves the Easier Way
Other Tilesets and Other Ways to Use Them

Credits:
Rocky Cave - Unknown
Hell Tileset - Zanyzora
Tree Tileset - Unknown
 
Introduction:

The Drawing Buttons
Use the three drawing buttons at your convenience.

Pencil - the pencil makes a small dot when you click on the mapping area, as you drag the mouse, you can make a line.  Click this button to manually draw something like the line of the dark soil as shown in the picture below. 

Rectangle - the rectangle button makes a square as you drag your mouse.

Ellipse - the ellipse button makes a circular shape.

Layer Buttons - These are the map layers.  The orange color corresponds to the layer level.  The icon in the farthest left side is the lower layer or we'll call it layer 1.  The second icon after layer 1 is the middle layer or layer 2, the third icon is the upper layer or layer 3.  The last blue cube is the event layer.  This is useful when some tiles are missing when testing the game like for example, take a look at the picture below.  Look at the orb as marked hidden under an elevated floor tile.  To fix this problem, you just insert and event in the event layer.



By inserting an event in the event layer using the right tile, the orb becomes visible during game play.



This is done by using the always on top option:




Tileset Review:

The marked tiles in the picture below are what I call the elevated floor tiles.  The upper tiles can be used in layer 2 or 3 while the lower tiles can be used in layer 1.  The tiles marked with "S" are used with the elevated floor tiles.



For you hero get to the upper level of the elevated floors of your cave, we can use the following marked tiles.



Look below example on how the tiles can be used.  The stairs can be used in layer 2 or 3.  The slope as seen under can be used in layer 1.  The rope ladders can even be used like the one I did below.



The following marked tiles (below) are the tiles that I refer as edges.  They can be used to add the darker spaces that makes up the shape of the cave.



The following marked tiles (below) are the cave's walls that can be used in layer 1.  The tiles with broken lines are still part of the walls of the cave.  The longer wall below with the shades darkening are used for pits.  Other wall parts are marked and seen in the next fourth picture.



Look below example on how the pit tiles can be used.



Look at the left side of the picture (below) to see the tiles used in the mapping area.  The same tiles could be found in other cave tilesets only with their appearance and other elements changed.  Layer 1 is the best layer to put on the walls and the floor autotiles.



Look at the picture below to learn how to extend cave walls.



The marked tiles on the tileset seen on the left side correspond to the colors in the marked tiles on the mapping area.  It can be used as what you can find in the picture examples below.



The marked tiles above picture can be used the same way as with the next marked tiles in the next picture.



For the usual cave mapping, the upper half of the cave (from the orange marked tile to the light blue tile including the red and gray) below are put in layer 1 while the lower area, the cave's edges (tiles marked with yellow, green, and brown) can be put in layer 2 or 3. 



If we add the elevated floor of the cave in layer 2, we should put the edges in layer 3.  If you don't put the elevated floor tiles, you can also use layer 2.  You can always use any layer to place your tiles.  Test play and make sure that everything looks fine.  When following another approach (learn this on the section "mapping caves the easier way"), you can either use layer 2 or layer 3 for the cave autotile.  Read the section on how to easily design cave's using the prepared autotiles.



The orange marked tile on the tileset below, can be used to extend the height and width of your caves.  The same with the pink and light blue tiles.  For a "variation" on the walls, you can use the following tiles as marked below.  To add shadows on the walls, use the marked tiles as seen below.  To really understand the marked tiles, refer to the pictures under "mapping caves the easier way".  The yellow marked tile with the stretched rectangle in the mapping area is the shadow of the wall.

 

Mapping Caves the Usual Way
If you want to do it the slow way, follow this tutorial.

You can use layer 1 to put on the walls, edges and the floor of the cave.  We used the tile as marked below for the ground of the cave.



On layer 1, Use the following autotiles as marked below picture for the cave's floor.  Draw them in a random manner.



Use the marked black tile as shown in the picture below to add the dark space.



Refer to the picture below to know what tiles are used on the mapping area.



We use the layer 2 or the middle layer for the upper edges of the cave.  Refer to the marked tiles on the left side of the picture below.  These are the tiles used for layer 2.



If you will use the sunlight tile, you can put it on layer 1.



You'll then have to put the edges in layer 2.



If you decide to add more things like elevation in layer 2...



...Put the elevated floor tiles in layer 3.



And this what will look like during game play:

 

Mapping Caves the Easier Way

Follow this tutorial if you want to map caves faster and easier.

Note: In this tutorial, you can follow either two of my approaches.  For type 1,  the autotiles are used in layer 3 so that the elevated floor tiles of the cave can be used easily in layer 2.  Follow type 2 so you can use more tiles from the tileset.  Type 2 uses the second layer for the autotiles.  In this approach you can still use the elevated floor tiles.  You'll just need to cover tiles in layer 3.

We can use the following autotiles for easily mapping cave interiors. 



Go to the database and set them to their specific tilesets.  Set the passability to square and the priority to 5.  This will make the autotile feel like the normal tileset.



The autotile goes here as shown below picture.



Type 1

We used the tile as marked below for the ground of the cave.



Click on the flood fill button and click the lower layer button .

Click anywhere on the mapping area.  The fill button fills up all the white area in  layer1 or the lower layer.





Use the following autotiles as marked above picture for the ground of the cave in layer 1.  Draw them in a random manner.



Let's go to layer 3 or the upper layer. Choose the earth cave autotile and draw any shape that will make up the cave area using the pencil tool.  Add a small area for the entrance.  Make this noticeable to your player's eyes as seen below in the lowest part of the map.



Use the fill tool and click outside the line you draw before.  This makes the dark area as shown below picture.



Get back to the first layer and put on the walls.  Use the tiles as marked on the left side of the picture below.



You can use the sunlight tile in the cave's entrance on layer 1.



Go to layer 2 or the middle layer.  This is where we can add the cave's "things".



Use the third layer to fix things or add more things.



This what will look like during game play.

 Type 2

Layer 1
We can use the lower tiles of the elevated floor tiles in the first layer.



Layer 2
We use the upper tiles of the elevated floor tiles in the second layer.



Layer 3
We use the third layer to cover tiles we need to hide so that we can still use the elevated floor tiles in layer 2.



Output



The marked tiles named variation on the left side of the picture as shown below is the same as the tiles you can see above with the orange square.  The marked tiles named shadow are the tiles you can use to add shadows on your cave.  Look at the layer 1 picture before for reference of the cave's shadows.  The yellow marked tile with the stretched rectangle in the mapping area uses the shadow tiles.  As you can see with the 6 orange marked tiles in the mapping area, we use the same orange marked tile in layer 1 to extend the height of the walls of the cave in the upper area of the map.  The same method used with the 2 light-blue marked tiles.

 

Other Tilesets and Various Ways to Use Them

Rocky Cave
Note: Do not right-click to save the tileset, the picture below is only a preview.  Click on the picture for the actual tileset.

Using this Tileset

Layer 1


Layer 2


Layer 2


Output



Hell
Note: Do not right-click to save the tileset, the picture below is only a preview.  Click on the picture for the actual tileset.

Using this Tileset

Other things you can use with this tileset:


The three following resources are original modifications of mine so you can use them with the hell tileset.






Layer 1


Layer 2


Layer 3


Output


Inside Tree
Note: Do not right-click to save the tileset, the picture below is only a preview.  Click on the picture for the actual tileset.

Using this Tileset

Layer 1


Layer 2


Layer 3


Output
Interior


Exterior


FIN...

 




collide?


October 7, 2008
delikado sa kalusugan. kamon!
written by inggaydadyeminay at 07:47 AM .

i had a really weird dream last night..

maybe it's because of all the melamine thingy i've been hearing and seeing on the news over the past week.

you see, in my dream, aside from milk and dairy products (they didn't specify from what country)   plastic beverage containers including bottles of mineral water, C2 and  even those plastic cups used in fastfood chains are being banned also.

why?!?

because...

in my dream, they said that these plastic contains....SPERM!

kamon! so there i was drinking C2, and one of my friends yelled, "Nats! Wag yan! Di'mo ba alam may sperm pati takip ng mga bote!?"

gee sperm poses a great danger to our health. kamon. >_< so all plastic containers should be tested for sperm content! lol.

kung ano ano napapanaginipan ko.

hmmm maybe the real reason behind this is my lack of brain activity. haha.

 

i should contact some friends and go out of the house today.

 

 

 

 


{ mood } worried to death haha


12 collided


October 6, 2008
Real Pixel Plus Cheating!
written by undwight at 03:29 PM .

Real Pixel Art

Plus Cheating!

A Non-Isometric Pixel Art Tutorial

by Dwight Delleva (under construction)

 

Introduction:

This guide is based on my knowledge and own style especially created for game design.  The guide actually has a Cheat section where amateurs can easily follow some editing tricks. 

Pixel Art if you don't know is a digital art done by painting in pixels.  The tiniest part of a computer image is what you call a pixel.  Pixel painting is equivalent to bitmap painting and the program MSPaint is what you all need.  Where can you find pixel art?  Pixel art can be found and used especially in 2d games.  If you have seen or played RPG's like Final Fantasy in the SNES console, everything is in pixel art.  Familiar with the word sprite?  Sprites are the characters you seen in the game and another term - tileset is where the characters are on or basically the map where you can walk around  including areas where the character can't pass through such as walls of buildings.  Maps or the game environment are made up of a tileset and a tileset is made up of tiles.  These tiles were designed so you can extend or expand floors and walls for example. 

Images in pixel art would look amazing when you look at their normal size.  But when you zoom, you will learn that the image is a trick of impressive color shading.  Look at the example below, believe it or not, it's a bitmap painting.  Pixel art is mostly about zooming in, shading and color palettes.

 

 

Preparations:

  1. Be patient.  Painting pixel by pixel should be slow for beginners.  As you learn then often practice, the quicker you get.

  2. Do not rush (unless you're a professional).  Rushing things will make your work ugly.  Do it slowly but surely.

  3. Before making a tileset (for games), have an enumerated list of things that you want to be included in the tileset.  Click "view" to find an example  below I created for the interior of a house.

     
  1. After listing possible interior things as seen from the table, the next step is   to make their draft equivalent.  Make sketches on paper.  Use them as reference when painting on the computer.

  2. Prepare your color palettes.  Refer to the image above.  The leaves of the tree contain 5 different shades of colors from the darkest to the lightest.   The palette I used are 5 shades of green for the leaves and 5 shades of brown for the trunk.

  3. You can not paint in pixel if you don't know how to use a bitmap painting program, familiarize yourself with MSPaint's tools.

 

 

Program:

We use the easiest MSPaint program to draw pixel art.  We'll talk about the program's important tools. 

 

Tools

Shortcuts

Function

Undo Ctrl+Z

You can only undo for 3 times.

Repeat Ctrl+Y

You can only repeat up to 3 times again.

Cut Ctrl+X

Use any of the selection tool, click on the painting area then drag the mouse, the area inside the box in dotted-lines shown will be selected, right-click inside the box, click Cut.  The area you chose will be cut or deleted.

Copy Ctrl+C

Use any of the selection tool, click on the painting area then drag the mouse, right-click inside the box, click Copy.  The area you chose will be copied. 

Paste Ctrl+V

After using the Cut or Copy function, you can paste the cut or copied area by right-clicking anywhere the 'painting area'.  Click on paste after right-clicking.

Clear Selection Del

Use any of the selection tool, click on the painting area then drag the mouse to the selected area you want to be deleted, press Del to erase selected area.

Select All Ctrl+A

Selects everything in the painting area.

Tool Box Ctrl+T

Shows and hides the tool box.

Color Box Ctrl+L

Shows and hides the color box.

Flip/Rotate Ctrl+R

Can be used after the Cut or Copy function.  Right-click anywhere the painting area, click flip/rotate to flip horizontally or vertically the selected image or rotate by angle. 

Attributes Ctrl+E

Change the width or height of the painting area

Clear Image Ctrl+Shft+N

Deletes everything in the painting area.

Coloring / Drawing Tools

Function

Free-Form Select

After clicking the button, click then drag the mouse in the painting area.   The selected area can be then cut, copied, or pasted.  Try holding SHIFT then move the selected area.

Select

Another selection tool in the shape of a square or rectangle.  The selected area can be then cut, copied, or pasted.  Try holding SHIFT then move the selected area.

Eraser/Color Eraser

Use to erase anything in the painting area.

Fill With Color

Must be used in a closed space so that the color will not scatter.

Pick Color

Picks color from the painting area.

Magnifier

Zooms in the painting area to a larger scale.  Click button again to turn back the painting area to its normal size.

Pencil

Draw a pixel in the painting area.  When you hold SHIFT, you can draw a straight horizontal and vertical line.

Brush

Larger than the pencil.

Airbrush

Let's you spray in three sizes.

Text

Write text in the painting area. Can't be used when the painting area is zoomed.

Line

Draw lines.  Comes in 5 sizes.  When you hold SHIFT, you can draw a straight horizontal, vertical, and diagonal line.

Curve

Draw curves.  Draw a line first in the painting area.  Let go of the mouse, click in the painting area, move the mouse to the desired range.  You can move the mouse anywhere, the line follows the mouse pointer.  This makes the curve.  You can make another curve.  The second curve can adjust the first curve.  When you hold SHIFT, you can draw a straight horizontal, vertical, and diagonal line.  Does not affect the curve.

Rectangle

Draw a rectangle in the painting area.  With three selections.  The first is the normal rectangle.  The middle one; the area inside the rectangle is filled in white by default.  The remaining rectangle is filled in black.  Try holding SHIFT.

Polygon

Makes intersecting lines.  Try holding SHIFT.

Ellipse

Draw a circle.  Good for outlining spherical or circular shapes.  Try holding SHIFT.

Rounded Rectangle

Functions the same like the rectangle only with curved corners.  Try holding SHIFT.

 

Other Info:

  • Double-click any of the boxes from the color palette, click "define custom colors" to customize the colors of the palette.

  • From the "view" menu, click on "zoom" then "custom" to open the "custom zoom" box to choose 5 zooming ranges.

  • Click the area around the color palette, hold then drag the mouse to move the palette box to the desired location.  You can do the same thing with the Coloring / Drawing Tools' box.

  • Use the vertical and horizontal scroll box if the painting area is too large or when in zoomed mode.

  • Find the dots around the painting area, when you click on them then drag the mouse makes you expand or contract the painting area.

  • You can resize (increase/decrease) images after using any of the selection tools by clicking also the dots then dragging the mouse.

  • Stretch and skew functions are found under the "image" menu.  'Stretch' can expand or contract selected areas or the whole painting area and 'skew' makes slants

 
 

Methods:

 
 
  • Dithering - is a technique wherein you blend colors to make an illusion of a new shade.  Dithering gives depth to pixel art.

 

Normal View

Dithering Without
(zoomed view)

(zoomed view)

 

Normal View

Dithering Without
 (zoomed view)

 (zoomed view)

Try to look at my tree house example under the variety section.  Dithering was applied on the flooring of the veranda, door, mini chimney, etc.  Dithering was not applied on the trunk of the giant tree, lighted window, pipes, etc.

 
 
  • Flipping - makes use of the flipped side to form the image as a whole.  Suitable to apply on things with proportional sides. 

  1. If you finished designing the other half...

  2. Use the flip function, "horizontal"...

  3. Join the two halves.

You might find this some sort of cheating, but pixel artists do this for an easy and quick finish.

If you think only cheaters do this, a BIG NOT!  Let's take a look at a game like Neophyte (windows).  If you study the screenshot by looking at the marked furniture, you'll find flipped pieces.

You can use flip to easily make the parallel image of any upright things like what they did with the chair as seen above and what I did with my example below.

  1. A bamboo chair right-facing.

  2. Flipped to make it face left.

  3. Final product.

Another game example is the Star Ocean (snes).  The left and right sides of the bed, the windows including the curtains, and the walls looked identical because they were just flipped.  You can actually find other flipped things if your eyes can find them!

 

That includes the diagonally facing wall, the carpet, the legs of the chair, the top area of the bookshelf, the pot of the plant with red fruits, and the weighing scale.  Why pixel artists do this?  Again, this technique is easy and quick.  Artists also make use of the other side to make a new side.  They do it by modifying some parts of the image like the example below.

  1. This is the first half of my watermelon.

  2. I flipped the half.

  3. Joined the two halves.

  4. Edited some of the other half.

  5. Added some red and black dots making the juicy flesh.

You can also use the 'horizontal' and 'vertical' flips to any applicable pieces.

  1. Original pose.

  2. Flipped horizontal.

  3. Flipped vertical.

  4. Flipped horizontal.

 
  • Re-coloring - create variety by changing the original colors of the image.  Re-coloring is done by simply using a different color palette.

An example of re-coloring.  The same flower buds, only in different colors.

Re-coloring can be applied to anything.  You can redo the hair, costumes and skin of your sprites.  You can re-color some parts or the whole image.  Final Fantasy 3 used this method on the walls as seen in the three various house interiors below.

 

They used the same looking wall.  The only difference is their color palette.

Cheating Time!

(under construction)

 
 
  • Copy Pasting - draw separate images then join them.  By following this method, you can create numerous pieces.

  1. I used the same base for my two fruits.

  2. I draw various sizes and poses of the fruits.

  3. I made the two types of leaves.

  4. By copying then pasting the fruits and the leaves to the same base, I easily made two variations of each hanged fruits.

 
  • Light Source - establish an imaginary sunlight location.  Decide where light will fall.  Setting up the position of light gives realism to images. 

Examine the lamp.  If light is on the left side, the darker the color becomes on the right side.  You can distinguish where is light coming from because of the bright colors used that gradually gets darker. 

The lightest color as seen in the palette is used to emphasize sunlight's location and the darker colors stresses the lamp's shadow.

The best sunlight area is the upper left or upper right of the object.  You can also just make it left or right.

Using no highlights and shadows makes a flat-looking picture.  To show shape detail, let there be light and some darkness.

 

 
  • Create Variety - done by putting other elements on the same image, flipping images, or changing color palettes like when re-coloring.  You can add, minus, or modify to create variety.

 

You can make up to 24 vine varieties by just extending the length of the vine, adding the curls to the original image and to the extended vine plus when you add the various colored flowers.

You can avoid monotony by following this method.  The same principle is followed when you make a map for a game. Randomly designed maps are not boring to look at.  Things with no variety are uninteresting.

Examine the next picture.  What varieties can you find?

These are the lamps, windows, and the stairs.

Find another variety of my tree house in the next picture example.  The first picture had verandas.  The next simpler picture has no veranda.  Both tree house designs used the same trunk base.  The element which is the veranda was removed to make a new kind of tree house.

Comparing the two examples, we can conclude that variety can be implemented not only with small things that makes up the image but with the over-all look of the image including these small things.  (Take note; the monkey was done using a cheating technique)

Where to put variety?  Walls (cracks / no crack), trees (with fruits / no fruits), flowering plants (with / no flowers),  and mostly anything in your tileset.  Refer to my Interior Plan table at the beginning ("with or without") for more examples.

 

 
  • Transparent Things (or see-through things) - (a re-coloring method) we can do this by directly or indirectly using / replacing colors with right suitable colors (confusing?).  If you don't wish to use photoshop or other editing program's transparency tool, then we can do this the hard way.

I wanted a barrel with water.  How do I create water inside the barrel?  Prepare the color palette of the water.  For my example, I used four shades of blue.

  1. At first I made an empty barrel.

  2. I used the darkest shade of my blue, used the fill button on the darkest brown.

  3. Replaced the darker brown with a darker blue.

  4. Replaced the lighter brown with lighter blue.

  5. Added the ripple using the lightest blue.

This is an indirect approach because I just replaced the original colors with a new color.  You can also do this directly without following the interior outlines of the barrel.

Where to apply Transparency?

  • Ghosts
  • Water, waterfalls and other liquids
  • Underwater things
  • Light, fire, and anything glowing
  • Shadows
  • Rainbows
  • Whirlwind
  • Clouds, smoke, other gases
  • Laser
  • Glass windows and walls
  • High-tech monitors

Cheating Time!

  1. From the original colors...

  2. Erased, left the open area and turned the color into light blue.

  3. Added some design (lightened).

  4. Pasted to the original.

You can turn the picture into blue by using any image editing program.  Find color balance (RGB color values) then increase blue.  The same method can be done with other transparent objects.

More Coming Sections:

  • Anti-aliasing
  • More dithering techniques
  • More Lighting methods
  • Tileset creation
  • Creating Sprites
  • Animated tiles and sprites

 

 

 




collide?


October 4, 2008
On health problem
written by dirty_palette at 08:55 PM .

I was looking at my CT scans a while ago to check on the "pseudotumor" cos as far as I could remember, I shouldn't be feeling too much pain anymore now tat i'm back on medication.. It was then that I realized that the right hemisphere of my brain is larger than my left. I really saw it there. Anyway, I also saw the size of the pseudotumor, 1.88cm. x .79 cm. Imagine having that bulk inside you. Not that I really care. I just don't like the pain. So the next check-up's next next week together with a blood test again. I really hope that my neuro's gonna require me for a lumbar puncture cos i really think that steroids aren't effective anymore (i've read from my histo book that they are a kind of neuromodulators). I just want this to end. I don't like the pain; they come in different directions: beside my eye, at the middle of my brain, at the back of my head. Just.. die, whatever's causing this.

 




collide?


October 4, 2008
let's take it slooooow sooo sloowww
written by inggaydadyeminay at 06:59 PM .

sige smart bro..bagalan mo pa!

'yung tipong may mga apo na'ko sa tuhod eh hindi pa naglo-load ang page!

 

 




6 collided


October 3, 2008
CALL 1908-BATMAN
written by inggaydadyeminay at 08:17 PM .

change is inevitable. it is constant- like what everyone says.  i hate it. but i have no choice but to deal with it. i hate hate hate hate hate change.(bad changes)

i won't go into details

but lots of changes have happened lately.

some are good, others are bad and i'm having a hard time dealing with them.

right now, all i want is honesty from those people i trust the most. if they can't be honest, well... i demand that they become honest. be inconsiderate and just spill the effin truth. okey? i can't stand the way changes happen without me knowing why they're even happening.

hay parang walang sense >_<

minsan naiisip ko, hindi bagay sa'ken mag-english dito.hahaha.

bahala na si batmaaaannn...tententenen tententenen..

 


{ mood } bulateng inaasinan


2 collided


October 1, 2008
Non-advanced editor
written by tabulas at 12:48 PM .

If you don't like the WYSIWYG editor, you can now disable it from your control panel. ("Enable WYSIWYG editor")

 




3 collided


« Newer | »
Welcome to neutrons! Enjoy your stay and have a Blessed day!






YM: marquee_07
Windows Live: abase_yourself@hotmail.com
Gmail: marquee07@gmail.com

Title: RELOADED 10-14-07 3.29pm
wee.. New layout!! haha.. thanks up4grabs for the codes. Yep, this layout was edited by ME.

layout || Up4Grabs
image || Google Images
blog host|| Tabulas
image host || Tinypic
content ||