How to make a HTML5 RPG game engine--the second, misty rain + snow effect __html

Today we come to realize the rain + snow effect. First of all, a classic RPG game will inevitably need to join the changes in the weather. So in order to make our RPG game engine more perfect, we have to implement it slowly.

This article is the second of the series, if you want to know the previous article can look at the following list:

How to make a HTML5 RPG game engine--the first, the realization of map class

http://blog.csdn.net/yorhomwang/article/details/8892305

The engine is based on lufylegend development, please understand lufylegend first.

official website address:http://lufylegend.com/lufylegend

API Address:HTTP://LUFYLEGEND.COM/LUFYLEGEND/API

※ The inspiration for this development comes from an example written by Lufy in the Lufylegend.js download package. One, Leffect class

Let's start with a Leffect class, the constructor is as follows:

function Leffect () {
	var s = this;
	Base (s,lsprite,[]);
	S.rainlist = [];
	S.snowlist = [];
	S.rainlayer = new Lsprite ();
	S.addchild (S.rainlayer);
	S.snowlayer = new Lsprite ();
	S.addchild (S.snowlayer);
}

This Leffect class is also inherited from Lsprite,rainlist is used to hold an array of raindrops, Snowlist is used to hold an array of snow. Rainlayer,snowlayer is a lsprite, if it is snow on the painting on the Snowlayer, rain on the Rainlayer. The constructor is simple, and then let's see how the effect of the rain is achieved.

Two, the misty rain

Here I use the misty rain to describe this effect, inevitably have some excessive, because its beauty is far from reach that point. But the idea of being able to float on the screen is still true, so let's take a look at the code for it:

LEffect.prototype.raining = function (speed,size) {
	var s = this;
	if (!speed) speed =;
	if (!size) size = 5;
	S.rainlayer.addeventlistener (Levent.enter_frame,function () {
		s.onshow ("Rain", speed,size);
	});

First of all, it is a member class of Leffect, called Raining, has two parameters, respectively, rain drop speed, the other is raindrop size. Of course, you can use them without assigning them values, and if you don't assign them values, use the default values. Then add the Enter_frame event, which means that when the rainlayer is refreshed once, the following functions are called, which is equivalent to a timeline. Enter_frame specific use method can go to Lufylegend API document to look. Perhaps a friend is impatient, want to look urgently to see what onshow is a thing. The last section of this article will talk about it because it has something to do with the effect of snow.

The next turn to snow effect. third, the effect of flying snow

This time directly on the code, very raining almost, just changed the last call OnShow newsletters parameters and parameter assignment just:

LEffect.prototype.snowing = function (speed,size) {
	var s = this;
	if (!speed) speed = ten;
	if (!size) size = 1;
	S.snowlayer.addeventlistener (Levent.enter_frame,function () {
		s.onshow ("Snow", speed,size);
	});

Four, OnShow method

In implementing raining and snowing, we used the OnShow method, and gave it several parameters, we may wish to look at the code first:

LEffect.prototype.onshow = function (thing,speed,size) {
	var s = this;
	if (thing = = "Rain") {
		s.rainlayer.graphics.clear ();
		var Rainx = Math.random () * (lstage.width-10-10) +10;
		var n = s.rainlist.length;
		while (n--) {
			var o = s.rainlist[n];
			O.y + = O.s;
			S.rainlayer.graphics.drawrect (1, "white", [O.x,o.y,1,size],true, "#f3f3f3");
		}
		S.rainlist.push ({x:rainx,y:0,s:speed});
	else if (thing = = "Snow") {
		s.snowlayer.graphics.clear ();
		var snowx = Math.random () * (lstage.width-10-10) +10;
		var n = s.snowlist.length;
		while (n--) {
			var o = s.snowlist[n];
			O.y + = O.s;
			S.snowlayer.graphics.drawarc (2, "white", [O.x,o.y,size,0,2*math.pi],true, "White");
		}
		S.snowlist.push ({x:snowx,y:0,s:speed});
	}

Obviously, this onshow method is the core part of the whole effect class, the light look at the length of the code should know ... First, let's take a look at its parameters:

Thing: Effect type, if it's for snow it's snowing, if rain is raining

Speed: The speed of rain and snow

Size: The dimensions of rain and snow

The speed,size values in Speed,size and snowing and raining are the same, so if you're using snowing, raining, assign values directly to their parameters.

Let's explain the code now:

if (thing = = "Rain") {
	s.rainlayer.graphics.clear ();
	var Rainx = Math.random () * (lstage.width-10-10) +10;
	var n = s.rainlist.length;
	while (n--) {
		var o = s.rainlist[n];
		O.y + = O.s;
		S.rainlayer.graphics.drawrect (1, "white", [O.x,o.y,1,size],true, "#f3f3f3");
	}
	S.rainlist.push ({x:rainx,y:0,s:speed});

The above is the realization of the effect of rain, first we clear the screen once, and then randomly take an X coordinate as the location of the drawing. Then we iterate over our raindrops array, and each time we go to one, we add this y-coordinate to the size of the velocity. Then draw a small rectangle as a raindrop with a function in the lufylegend that is designed to draw a rectangle. The raindrops are then recorded in the Rain array. Because we use the timeline event, we can make the raindrops constantly draw.

The principle of snow is the same, the only way to paint is different, the picture of the rectangle into a circle. We can look at the corresponding according to what I just said. Five, how to write after the completion of the package.

We have just encapsulated the effect class, so how can others use it. I might as well show you the code, originally we want to write Baixin line to achieve, after the encapsulation is complete only these:

var backlayer = new Lsprite ();
var effect = new Leffect ();
Backlayer.addchild (effect);
Snow
effect.snowing ();
Rain
effect.raining ();

It's simple, isn't it? This is the power of encapsulation.

Six, Effect demo

To facilitate the test, I added a button and a selection box to display a different effect.

Screenshot below:

Demo Address: http://www.cnblogs.com/yorhom/articles/3073050.html

The code is very small, summed up as below, interested friends can be copied down to see:

/** *leffect Effect Class * * Function Leffect () {var s = this;
	Base (s,lsprite,[]);
	S.rainlist = [];
	S.snowlist = [];
	S.rainlayer = new Lsprite ();
	S.addchild (S.rainlayer);
	S.snowlayer = new Lsprite ();
S.addchild (S.snowlayer);
	} LEffect.prototype.raining = function (speed,size) {var s = this;
	if (!speed) speed = 30;
	if (!size) size = 5;
	S.rainlayer.addeventlistener (Levent.enter_frame,function () {S.onshow ("Rain", speed,size);
});
	} LEffect.prototype.snowing = function (speed,size) {var s = this;
	if (!speed) speed = 10;
	if (!size) size = 1;
	S.snowlayer.addeventlistener (Levent.enter_frame,function () {S.onshow ("snow", speed,size);
});
	} LEffect.prototype.onshow = function (thing,speed,size) {var s = this;
		if (thing = = "Rain") {s.rainlayer.graphics.clear ();
		var Rainx = Math.random () * (lstage.width-10-10) +10;
		var n = s.rainlist.length;
			while (n--) {var o = s.rainlist[n];
			O.y + = O.s;
		S.rainlayer.graphics.drawrect (1, "white", [O.x,o.y,1,size],true, "#f3f3f3"); } s.rainlist.push ({X:rainx,y:0,s:speed});
		}else if (thing = = "Snow") {s.snowlayer.graphics.clear ();
		var snowx = Math.random () * (lstage.width-10-10) +10;
		var n = s.snowlist.length;
			while (n--) {var o = s.snowlist[n];
			O.y + = O.s;
		S.snowlayer.graphics.drawarc (2, "white", [O.x,o.y,size,0,2*math.pi],true, "white");
	} s.snowlist.push ({x:snowx,y:0,s:speed}); }
}

a few days ago made a message board, you are welcome to express their views

Message Board Address: http://www.cnblogs.com/yorhom/archive/2013/04/20/3033235.html

----------------------------------------------------------------

you are welcome to reprint my article.

Reprint Please specify: Transferred from Yorhom ' s Game Box

Welcome to keep an eye on my blog