Kat's Home

Reflections on My First Game

Fri, 05 Sep 2014 16:53:00 +0000

Hmm..Here is the thing…I made a game recently.

And I put it on http://awu.so/Journey/.

The whole process is super exciting for me.

I enjoyed every second when I play with it.

But…

it turns out not as good as I expected.

So I finally stop refining it and start to reflect on the whole thing.

The basic game flow was completed.

In the game you travels from town to town, and trade goods in towns’ markets. When travels you will meet monsters, you will fight monsters by play a game similar to puzzle and dragon. And you will get loot after fight.\n

The first problem is that, there is two game system in the game: the trade system and the fight system.

The trade system is that goods types and prices varies, so you can speculate on them.

The fight system is quite tricky game.

Both these two parts can be a single game. Now they are distracting.

The second problem is, it lacks a story line as well as a growth curve. This problem was on the TO FIX LIST. But I may not fix it since the first problem makes the game’s integrity is not very well.

The third problem is, the trade system calls for little amount of goods to make the trade fluent, but the fight system calls for more to make it exciting.

Making game is quite time-consuming..Source materials take a lot of time to draw or collect. Bugs need a lot of time to be found. But most important is thinking thoroughly before you make it. Including develop platform, game type, game screen style, story, growth curve to keep player exciting.

I made a dream this afternoon =w=..it’s kind of a nightmare, but can be a good game.

In the next step, I will take some time to prepare on the new game.

BTW, if you see this post and play the game - Journey. Pls kindly leave some comments to me. My Email

Js Scope and Scope Chain

Wed, 30 Jul 2014 14:52:23 +0000

I found such a problem when I played with cocos2d-js:

for (var i in goods_today) {
	var cur_good = goods_today[i];
	var good_label = cc.LabelTTF.create(goods_name[cur_good] + ":"
		+ prices_today[i], "Arial", 20);
	var good_item = cc.MenuItemLabel.create(good_label,
		function() {this.buyIn(cur_good);}, that);
	market_list.addChild(good_item);
}

It turned out that every MenuItemLabel got the last value of cur_good for its parameter for buyIn.

For example, in “for” loop, cur_good got value 0, 1, 2, 3, but when I click these four MenuItemLabels, they all called buyIn(3).

To explain the problem, there are two principles should be explained first.

1.Scope

{}, if(){}, for(){}

does not mean a scope in javascript, only function(){} give us a scope. e.g.

var name="global";  
if(true){  
    var name="local";  
    alert(name);
}  
alert(name);

Both alert will give us “local”, because if(){} does not make var “local” a local variable, so “global” is overwrited.

So for (var i in goods_today){} equals to var i; for (i in goods_today)

2.Scope Chain

The following codes explain how functions find variables. when b() executes, it follows the sequence of b()->a()->window, b() find name in b(), and output “Scope3” when c() executes, it follows the sequence of c()->a()->window, c() can not find name in c(), but find name in a(), and output “Scope2”

var name = "Scope1";
function a() {
	var name = "Scope2";
	function b() {
		var name = "Scope3";
		alert(name);
	}
	function c() {
		alert(name);
	}
	b();	//-->"Scope3"
	c();	//-->"Scope2"
}
a();

That explains why I got 4 “buyIn(3)”

So I need to put these codes into a function to create a scope:

for (var i in goods_today) {
	(function(that, good){
		var cur_good = goods_today[good];
		var good_label = cc.LabelTTF.create(goods_name[cur_good] + ":"
			+ prices_today[idx], "Arial", 20);
		var good_item = cc.MenuItemLabel.create(good_label,
			function() {this.buyIn(cur_good);}, that);
		market_list.addChild(good_item);
	})(this, i)
}

Now it works well~

Sketchs

Fri, 21 Mar 2014 20:00:23 +0000

Recent sketchs

Evaluation on Images

Wed, 09 Oct 2013 07:54:23 +0000

I implement an interesting tool to calculate the harmony of pictures.

It is based on the algorithm described in former post

It can used to compare two similar pictures,

e.g.

Two color scheme for the webpage you created
A photo before & after adjustment

There is little meaning for compare the score for two absolutely different picture.

Ok, let have a look at the demo evaluation page.

Lower score indicates better performance.

Evaluation Page for Picture’s Harmony Score!

The first two pairs of examples is provided by the paper which propose this algorithm, it appears that pictures keep align to the theory do have better(aka lower) score. Pictures with lower scores do look better than the ones with higher scores.

But

1.The ones have score 0 doesn’t necessary have a perfect performance because there are still difference for pictures keep align to the hue wheel which can be study for more.

2.The most harmony ones are not necessary the attractive ones. Some ugly ones might got more attention.

It remind me of the following joke…

Experiments on Color Harmony Evaluation and Adjustment

Tue, 24 Sep 2013 07:54:23 +0000

Part I: Color harmony evaluation

I evaluate two-color harmony with the theory and made a evaluation page.

The harmony score calculated is adjusted according to such a use case “It looks harmony, impressive and not eyestrain as a background color scheme for ads”.

Higher score indicates better scheme. Scheme with score lower than -0.5 is strongly not recommended. Scheme with score higher than 0.5 is quite safe and harmony.

Evaluated colors are selected from some existing web pages.

ColorHarmonyEvaluationPage

Automatic adjustment on color scheme

Sun, 15 Sep 2013 07:54:23 +0000

Recently I am studying on how to create a color scheme automatically, so I collected some information related to color theory. When we create a color scheme, we have full control on colors. How can we make sure the combination of the colors is harmony? Let’s start with the basic.

Hue

There are three primary color(red, yellow, blue), and combinations of them, which can be described in a hue wheel:

Colors on the opposite position =, e.g. red and green, are called complimentary colors. They make strong conflict with each other as we all know, but they are not necessary can not work well with each other, because colors have two other properties：

HSaturation

Saturation describe the strength of a color. Colors with low saturate have low contrast with each other.

Value

Value describe the brightness of a color. The difference between so called light blue and dark blue is their value.

Now we got the color space we called “HSV”. Although color space “RGB” we know it for better, but an rgb value is hard to understood by human.(But a “RGB” space can be easily displayed on a 2-dimension picture, so it’s wildly used on computers)

So what’s the secret of good looking color schemes?

Two main rules sounds simple and works well:

The relationship between colors’ hue.

The following is a harmonic templates on the hue wheel. A collection of colors that fall into the gray areas is considered to be harmonic. The templates may be rotated by an arbitrary angle. The harmony score can be calculated by formula (1), which adds up the distance between the hue of each pixel and the hue of the template.

2.The relationship between colors’ saturation and value.

Generally speaking, colors look good together when their values are varied, but their saturations are similar. Let’s get some example and see what happens:

The left scheme has the exactly same hues of the right scheme. But the left one has similar value for colors which makes people feel tired to see it. That is to say, they are all bright or all dark forcing your eyes struggle to find the defining line between each hue.

So if you want a nice color scheme,

Choose several dominant colors representing the style you need.
Adjust the hue of the dominant colors to some hue template given above.
Add other colors while keep align to the hue template.
Make the saturation of the colors to be similar and vary the value of the colors.

And see what happens.

Some example with “before” and “after” will be added soon. :D

Reference: “Color Harmonization,” by Daniel Cohen-Or et al., ACM Transactions on Graphics (TOG), Volume 25:3, July 2006. Proceedings of ACM SIGGRAPH 2006, pp. 624

First blog on my own place~

Sat, 31 Aug 2013 15:44:23 +0000

I bought this domain for a whole year…Between miaowu.so and awu.so, I choose this one for building a pet social network or a food searching website. How brilliant I am!!!

And finally decide to use awu.so to build my own blog=v=……….

It is not fun as I thought…But at least I don’t waste it anymore.

I haven’t write some public blogs for 4 years…So it’s kind of a big step for me.

I will write something about my work, my life, my drawings, my questions on this website.