Saturday, October 6, 2012

My Gamestar Mechanic Game - Cubic 2036



It's been about 4 months since the last time I published a game on Gamestar!
I've already tried a long fantasy story and a medium funny one and a super short realistic one,
this time, it's a short science fiction. :)
I hope you would like it! :)




Some random facts about this game:

1. The name " MacCarthy " is adopted from Dr. John McCarthy.
     If you google him you will understand why. :)

2. The 33rd vessel is called " Cubic M-33 ", M33 can also be referred to
     a neighborhood galaxy.

3. The reason I chose year 2036 is because it's the time " John Titor " " came from."
    Google this interesting person, I love his story no matter if it's true or not.
     It's more interesting than most science fiction novels I've ever read. :)


Sunday, June 24, 2012

A Backgournd Resource Pack By MagicMan


A GSM user, MagicMan, made a beautiful background resource pack with tree bark and leave vine,
you can use them to make a forest background. :)
I particularly like the curved bark idea. Try it out sometime!

You can find the resource pack here: Forest Resource Package
You can also find  MagicMan's blog link under my sidebar called " Friend's Links ".

Have fun! :D


Saturday, June 16, 2012

Gamestar Mechanic Background Tutorial Part 3 - Resource Pack - Dollhouse



Remember last time I made a resource pack with some simple backgournds that you can use
at once? This time I came up with a new idea of this background that you can actually
customize it by yourself. :)

It's a dollhouse, you can use it as an usual game level, a town or a hotel, anything you want.
The fun part is that I provided you the colorless empty house with items you can decorate
it with, so you can arrange the items and color them by yourself and  be able to make your
house look unique. :)



You'll need graphic software like GIMP or Photoshop to use these files, I saved the items as
PNG files and removed the background for you, so you can simply select the item---> copy
it ---> paste it on the house. If you're using Photoshop, you'll need to " flaten image " after all
the works are done and save the file as a jpeg file. If you're using GIMP, you can save this step
because every time you paste an item on the house and unselect it, it merge into one layer
automatically.

*Little tip: when you need to cover up one item with another, make sure the front item is on the
upper layer so they are stacked up correctly. If you're using GIMP, always make sure to paste
the items behind first.
For example:

Since the windows are on the wall, they're behind the furniture. Therefore, when you're
using GIMP, always make sure to paste these items first.
( Because when you unselected an item it will merge onto the original layer at once, then
you won't be able to fix it easily if you make any mistake. )


Windows first, then you paste the furniture in front of them.

Finally, add color to it.


You'll also need to add color to it in your graphic software, there are many effective ways, you
can get the job done even only with bucket tool. If you're not familiar with the software, try to ask
others to help you, like your teachers, your parents, your older siblings or friends who knows
how to use it.

Here is an example of a house colored with only bucket tool. :)
(Alright, I admit I don't have much sense arranging colors. XD)



Here's the download link of the dollhouse resource pack:
Click Here
There aren't many items to choose from yet, but I'll add new ones for you every now and then. :)
The way to set up your background is as usual, set the width and height according to the file name
and remember to set background scrolling to " locked. "
Have fun! :D



Wednesday, June 6, 2012

Hottategoya Games - An Escape Game Website


" Escape Game " is one of my favorite game genres, I've already played thousands of
games in this genre. XD
It has a very active community, every now and then when I feel like to take a break and find
something fun to do, there're always tons of new games out there for me.
It's usually small and short website based flash game, you can find the definition in WIKI:

" Escape the room is a subgenre of point-and-click adventure game which requires a player
to escape from imprisonment by exploiting their surroundings. They are usually created as a
browser game for the Adobe Flash platform. Popular examples include "Crimson Room,"
"Viridian Room," "MOTAS,", "Droom" and Big Escape 1,2,3,4 on TVOKids. The subject
of the game is to find a way to escape from a mysterious room. The room usually consists
of a locked door, several objects to manipulate as well as hidden clues or secret compartments.
The player must use the objects to interact with other items in the room to reveal a way to escape."
WIKI's original page

Most of my favorite escape games are made by Japanese designers, that's why I chose this
website to introduce to you: it has an English version! :)

Hottategoya Games

Better than that, this designer usually only use numbers and common symbols to make puzzles,
so people from anywhere can enjoy them without difficulty. :)
Hottategoya's games are always very well made, I bet you can also find inspirations to make your
own puzzles from them! :)

Have fun! :D

* In case you got stuck in his games, search for the game titles at Youtube, most of his games has
video walkthourghs there! :)




Friday, June 1, 2012

Gamestar Mechanic Background Tutorial Part 2 - Resource Pack



Actually I'm still working on the second part of the background tutorial,
but I want to do something for you right now just in case you can't wait any longer. XD
This is for those who want to try out some custom-made backgrounds right away,
especially the one's who already downloaded GIMP, this would be useful for you! :)

I made you a gimp file of 640x480 grid layer, so you can save the trouble. :)
I also added some ready-to-use backgrounds for you to try them out.
Have fun! :D

download the background resource pack here

How to use the backgrounds:



P.S: You need a premium account to use custom backgrounds.




Tuesday, May 22, 2012

My Gamestar Mechanic Game - Twinkle Twinkle



This is my first sample game for the background tutorial.
Since I made another much shorter game instead,
This game doesn't have to be short and simple anymore;
so I made it even longer! XD

There were only 3 levels, now there are 9.
Enjoy! :D




A small fact explained after you finish this game:
When we look up to the sky the stars seems to move around Polaris,actually their movement
is due to the rotation of the Earth, and the Earth's rotation axis happens to be pointing almost
exactly at Polaris, that's why it seems to be still all the time. :)


Saturday, May 19, 2012

Some small details in " Farewell, Knight! "



When I make the game " Farewell, Knight! " I put a lot of thought into it.
It also shows in some small details which I want to share with you in this article. :)


1. Names in Farewell, Knight!:

    Annie: it's my good friend's name. :)

    Lady: I use this name because a knight should always serves a lady.
    The two are binding together.

    Gizmo: I adopted this name from the film " Gremlins ". It's definition is "A mechanical device
    whose name is forgotten or unknown. "
    This unknown device is small yet essential for the whole construction.
    I think it fits the character of this little helper.

    Mizar: Name of a star. It's located in Constellation Ursa Major.
    One of the seven stars of " The Big Dipper".
    My favorite star.


2. If you looked at the background in the level " Clock Tower " really carefully,
    You might have noticed that I drew all 12 constellations on the left!

3. I tried to name the levels that fits the story, so Clock Tower for extra time, Energy Field for
    extra energy.
    But why " Underground Tunnels " for the new body?
    Because earth nurtured all physical beings!
    ( not because the dead bodies are buried underground. Knight is not a zombie! XD )

4. Remember the rock art of Gizmo in Underground Tunnels? You might have noticed that
    Mizar is also there above her! And there's a rock art of a snake near the top left area,
    it actually shows you the safe spot to land.

5. Remember the small footprints that indicates the right direction in Heavenly Passage?
    They're actually hints left by Lady who already " Crossed Over ".

6. In case you didn't figure it out, when Knight thought that the new world is a more colorful
    place than Earth, it's just because back on Earth he was a dog, and dogs only see color
    blue and yellow.

Well, that's about it. I really hope people would take time to finish this game,
I spent a whole month making it and I wish you can read the whole story! :)
Have fun!


Tuesday, May 15, 2012

I'm Bejeweled! XD








I found this game in the CHROME WEB STORE and I became attached to it like no one else ever did.
Need prove?
Just look! XDDD







Monday, May 14, 2012

My Gamestar Mechanic game - Breaking In ( Tutorial Sample Game )


This is my second sample game for the tutorial, it's very short, just use it to show some basic concept.
I'm planning to show people how to draw a house with rooms in the background just like the one
in this game, how to draw those decorations and furnitures and add shadows. I'll put those in my second tutorial.


P.S: My first sample game is a little bit longer but it's not finished yet. XD


Sunday, May 13, 2012

Gamestar Mechanic Background Tutorial Part 1 - Concept Explained



I promised to make a tutorial of how to make a custom background for a Gamestar Mechanic game,
I tried to make a simple sample game for the tutorial but my first attempt ended up "not simple enough" and made it difficult for me to complete the task in a limited short period of time.
I don't want to keep people waiting for too long, so I decided to make an even simpler mini game and use it to explain the basic concept first.
So here it is.


First of all, a Gamestar Mechanic game's resolution is 640 x 480, composed of 16 x 12 columns which are 40x40 pixels each. (the same size of the sprites.)
This picture will show you the idea:



So if you want to make a background that fits the sprites perfectly, you have to make sure that your background is a retangular  put together with 640 x 480 retangulars and set " Background Scrolling "
to " Locked ". ( If you adjust it to " parallex ", the background will be out of position when the avatar moves. )



Here're some examples of the correct size of the background:



Also, you have to set the " Multiple Screen " correctly. For example:



Next, I'll show you how to build your background to make it perfectly match with the sprites.
If you're using a graphic software, the most important thing is to use a software that offers " layer " function.
Most advanced graphic softwares have this function, such as Photoshop, Illustrator, Painter and so on, but you can also find it in some awesome freewares like GIMP and Paint.NET. (you can find the download links at my left sidebar under " Free Resources " list. )

In my tutorials I'll use GIMP to make the backgrounds, but it's also a task to show you how to use the software alone, so I'll only cover the basic concept for now.
I'll show you how to  build the backgrounds with GIMP brick by brick in other tutorials when I got some more time. :)

Layers in a graphic software is like a transparent sheet, when you paint on one of the sheets, you can still see through the unpainted areas of the sheet. When you stack the sheets together, the painted areas on the lower sheets will show through the transparent sheets above while the painted areas on the higher sheets will always cover up the lower ones.

There are different ways to build your background, I'll show you my method first, here is the whole process:

1. Create a draft of your game, write down as many details as you can.
2. Build your game according to this draft without using any background.
3. Use " Print Screen " function to capture screenshots of your game and put them together as a whole piece, create a layer of it. (update: You can now use the "level map" function and save all the trouble! :D)
4. create a 640 x 480 grid layer, paste it above your game screenshot layer.
5. create another blank layer as your real background layer, put it between other two layers.
6. Build up your background brick by brick in position according to both " print screen " layer and " grid
     layer ".

This picture will give you the idea:



You might need to adjust layer property during the process, most of times we only need to adjust two of them, by choosing " multiply " in the layer property dropdown list, the graphic will overlap onto the layers under it. It makes sense when you want to check how your background fits the gameplay screen.
Another method is by changing the layer transparency. By default it's set to 100%, by reducing it you can see through the graphic on this layer and check the layers under it.

Let's take a look at some examples.
First, here are the three different layers:




When stack them together with default layer settings, it looks like this:



Adjust background layer transparency to 50%:



Set background layer property to " multiply " :



In this case the lower layer is too dark so when the colors all added up, you can hardly tell the graphic on the background layer.

" multiply " layer is ideal to add shadows to your background.
I'll show you how to do it in some other tutorials when I got more time.


You can also draw your background on a piece of paper and then scan it into digital file.
This is how you do it:

1. draw grids with PENCIL (so you can erase it later.) make sure it's put together with16 x 12
     columns retangulars.


2. sketch your background with pencil.


3. Use mark pen or other pen that can't be erased to draw the outlines and add color.


4. Erase pencil lines. (Update: Actually, it would be better to do it in this sequence: draw outlines with unerasable pen ---> erase pencil ---> add color.)


5. Scan the image and set the correct size, it's done.
    It doesn't matter if your hand drawing is the exact size, just make sure it's the correct
    proportion, then set the scanned image to the correct size. For example, if you drew  32 x 24 columns
    by 1 x 1 cm each, just set the scanned image size to 1280 x 960.(number of columns x 40)

* It would also be a good idea to scan only the outline image (remember to mark the corners so you can crop the scanned image correctly.) and then add colors in a graphic software. Because coloring is a very hard work and it'll be much easier to do it with a software, using functions like bucket tool.)

So this is pretty much the basic concept of the background making.
Hope it would help you to build your own backgrounds! :)
I need more time to create more specific tutorials and I can't promise when to publish them.....
Just hope I can squeeze out some more time as soon as possible! XD
Seeya!






Tuesday, May 8, 2012

Some useful resources...

I added some links of free resources at the left, they are all freewares,
If you want to try building your own game without paying for game engine and so on,
Try these goodies out!

Wednesday, April 25, 2012

Farewell, Knight! - Easy Mode



I fixed another version of " Farewell, Knight! " as it's " Easy Mode "
If you find the original version too hard, try this one. :)


Wednesday, March 28, 2012

Farewell, Knight! Video Walkthrough



I used screen recorder to make these, The quality is not ideal but acceptable.
I only recorded 6 levels out of 17, for these are the playable parts.
(other levels are more like story telling.)


 


Monday, March 26, 2012

Farewell, Knight! --- my Gamestar Mechanic game



Please wait until the background is fully loaded before you start every level.

請在每一關開始前先等待背景圖顯示出來再開始玩.

十字鍵控制方向, x鍵跳躍, z鍵作動作.(決定鍵)



(This is one thing that Gamestar Mechanic should improve.
They should put a loading bar or something before the game is fully loaded,
not start a level with a black background..... but overall,
I really really like this platform. It's REALLY easy to use, perfect for me XD )