How to make a HTML5 RPG game engine--fourth, scene dialogue __html

Today we come to realize the situational dialogue. This is an important feature, without which the game will become uninteresting. So we have to finish it.

But you know, the use of dialogue is not a simple matter, because there are a lot of things inside, such as the Avatar, character name, dialogue content ...

So we can only use the array +json to install the conversation information and then make a different display based on the information. And then I'm going to show you how to implement it.

First look at this series of articles directory:

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

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

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

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

how to make a HTML5 RPG game engine--the third, the use of curtains to switch scenes

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

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

1, after the implementation of the Code

To show you the need for encapsulation, let's look at the implementation code first:

<! DOCTYPE html>  

This 78 lines of code can be achieved 5 times the effect of the conversation, first send two screenshots, as follows:





This shows that the package is still very useful.

But how to achieve it. Please see the next explanation. 2,ltalk class

Ltalk is a dialog class, and the constructor is as follows:


function Ltalk (content) {
	var s = this;
	Base (s,lsprite,[]);
	if (!content) {
		s.content = [];
	} else{
		s.content = content;
	}
	s.x = 0;
	S.y = 0;
	S.textwidth = Lstage.width;
	S.talkindex = 0;
	S.facex = 0;
	S.facey = 0;
	S.namex = 0;
	S.namey = 0;
	S.namecolor = "BLACK";
	S.namefont = "Song Body";
	S.namesize = ";
	" S.MSGX = 0;
	s.msgy = 0;
	S.msgcolor = "BLACK";
	S.msgfont = "Song Body";
	S.msgsize = "";
}
 
Where the TextWidth property is designed to set the width of the text area, it will automatically wrap if the text is too large to exceed the area. Talkindex refers to the dialog number. Facex,facey refers to the position of the person avatar. Namex,namey refers to the position of the person's name; Namecolor,namefont,namesize is used to set the name color, font, and size. Msgx,msgy,msgcolor,msgfont,msgsize is the x-coordinate, y-coordinate, color, font, and dimension of the dialog.

Once you've set those properties, you can customize the dialog style.

This class is constructed with a parameter, which is the dialog content. is the format of an array set of JSON, as follows:


[
	{name: ' Name ', msg: ' Content ', face: Avatar picture},
	{name: ' Name ', msg: ' Content ', Face: Portrait picture},
	{name: ' Name ', msg: ' Content ', face: Avatar picture},
	{name: ' Name ', msg: ' Content ', face: Avatar picture},
	{Name: "Name", msg: "Content", Face: Avatar picture},
];
 

Each time you add one to the list, you have a conversation. 3,wind Method

Next look at the Wind method:


LTalk.prototype.wind = function (Num,completefunc) {var s = this;
	if (!num | | | num = null) num = 0;
	if (!completefunc) completefunc = null;
	S.talkindex = num;
	S.removeallchild ();
		if (S.talkindex < s.content.length) {var talkobject = S.content[s.talkindex];
		var facebitmapdata = new Lbitmapdata (talkobject.face);
		var facebitmap = new Lbitmap (facebitmapdata);
		facebitmap.x = S.facex;
		FACEBITMAP.Y = S.facey;
		S.addchild (FACEBITMAP);
		var name = new Ltextfield ();
		name.x = S.namex;
		Name.y = S.namey;
		Name.size = s.namesize;
		Name.color = S.namecolor;
		Name.font = S.namefont;
		Name.text = Talkobject.name;
		Name.width = S.textwidth;
		Name.setwordwrap (True,name.getheight () +5);
		S.addchild (name);
		var msg = new Ltextfield ();
		msg.x = S.MSGX;
		Msg.y = S.msgy;
		Msg.size = s.msgsize;
		Msg.color = S.msgcolor;
		Msg.font = S.msgfont;
		Msg.text = talkobject.msg;
		Msg.width = S.textwidth;
		Msg.setwordwrap (True,msg.getheight () +7);
		Msg.wind (Completefunc); S.addchild (MSg);
	}else{Trace ("Error:param exceeds the size of the content!"); }
}
This method has two parameters, the first is the playback sequence number, and the second parameter is the function that is called after the output completes.

First we determine if the parameter num is not defined, if it is automatically set 0, and then determine whether the second parameter is defined, if not, set to null. Doing so will ensure that the program is running correctly. Next, we set the attribute Talkindex that controls the playback number to NUM and then empties it once so that it does not overlap with the last output. Then judge whether Talkindex has exceeded the maximum value, and then executes the output command. The code is as follows:


var talkobject = S.content[s.talkindex];
var facebitmapdata = new Lbitmapdata (talkobject.face);
var facebitmap = new Lbitmap (facebitmapdata);
facebitmap.x = S.facex;
FACEBITMAP.Y = S.facey;
S.addchild (FACEBITMAP);
var name = new Ltextfield ();
name.x = S.namex;
Name.y = S.namey;
Name.size = s.namesize;
Name.color = S.namecolor;
Name.font = S.namefont;
Name.text = Talkobject.name;
Name.width = S.textwidth;
Name.setwordwrap (True,name.getheight () +5);
S.addchild (name);
var msg = new Ltextfield ();
msg.x = S.MSGX;
Msg.y = s.msgy;
Msg.size = s.msgsize;
Msg.color = S.msgcolor;
Msg.font = S.msgfont;
Msg.text = talkobject.msg;
Msg.width = S.textwidth;
Msg.setwordwrap (True,msg.getheight () +7);
Msg.wind (completefunc);
S.addchild (msg);
Familiar with Lufylegend's friend is not difficult to understand these, is the name, content, avatar all add to the interface. The display content is the corresponding content in the constructor parameter.

When wind is done, we want the text to be displayed verbatim only by writing a line of Obj.wind (); that's all.
4, change styles & manually empty dialogs & Reset Data

Just now we looked at the control text, picture style of several attributes, there are many, if one by hand change will be very troublesome, and to write a lot of lines of code, so we add a few control styles of methods, they are: Setfacestyle,setnamestyle,setmsgstyle. Use only the incoming parameters on the line.

The implementation method is as follows:


LTalk.prototype.setFaceStyle = function (Styledata) {var s = this; if (!styledata.x) {S.facex = 0;}
	Else{s.facex = styledata.x;} if (!styledata.y) {S.facey = 0;}
Else{s.facey = STYLEDATA.Y;}
	LTalk.prototype.setNameStyle = function (Styledata) {var s = this; if (!styledata.x) {S.namex = 0;}
	Else{s.namex = styledata.x;} if (!styledata.y) {S.namey = 0;}
	Else{s.namey = STYLEDATA.Y;} if (!styledata.color) {S.namecolor = "black";}
	Else{s.namecolor = Styledata.color;} if (!styledata.font) {s.namefont = "Arial";}
	Else{s.namefont = Styledata.font;} if (!styledata.size) {s.namesize = "15";}
Else{s.namesize = styledata.size;}
	LTalk.prototype.setMsgStyle = function (Styledata) {var s = this; if (!styledata.x) {S.MSGX = 0;}
	ELSE{S.MSGX = styledata.x;} if (!styledata.y) {s.msgy = 0;}
	Else{s.msgy = STYLEDATA.Y;} if (!styledata.color) {S.msgcolor = "black";}
	Else{s.msgcolor = Styledata.color;} if (!styledata.font) {s.msgfont = "Arial";}
	Else{s.msgfont = Styledata.font;} if (!styledata.size) {s.msgsize = "15";} Else{s.msgsize = Styledata.size;} }
It is worth noting that the parameter is a JSON object. The format is as follows:


/* Set style newsletters parameters for MSG and name/
{x:x coordinates, y:y coordinates, color: text color, size: Text size}/
* give face set style newsletters parameters/
{x:x coordinates, Y:Y coordinates}
OK, set the style for the conversation to be done.

Add a way to manually empty the conversation so that the user can manually empty the conversation:


LTalk.prototype.clear = function () {
	var s = this;
	S.removeallchild ();
	S.die ();
}
 

Finally, add a function to reset the dialog data:


LTalk.prototype.setData = function (content) {
	var s = this;
	s.content = content;
}
 
5,debug Output

In front of the design class, not to consider everyone debug, so did not add any debug output. The thought of this time, by the way to do, by the way the previous also done a bit. Today, only the debug output in Ltalk is rendered, the code is as follows:


LTalk.prototype.showData = function () {
	var s = this;
	for (var key in s.content) {
		trace ("----------No." +key+ "----------");
		Trace ("Name:" + s.content[key].name);
		Trace ("MSG:" + s.content[key].msg);
		Trace ("Face:" + s.content[key].face);
	}
 

Call this method output as follows:


6, source code

The source code is not much, we can take down to test:


/** *ltalk.js */function Ltalk (content) {var s = this;
	Base (s,lsprite,[]);
	if (!content) {s.content = [];
	}else{s.content = content;
	} s.x = 0;
	S.y = 0;
	S.textwidth = Lstage.width;
	S.talkindex = 0;
	S.facex = 0;
	S.facey = 0;
	S.namex = 0;
	S.namey = 0;
	S.namecolor = "BLACK";
	S.namefont = "Song Body";
	S.namesize = "15";
	S.MSGX = 0;
	s.msgy = 0;
	S.msgcolor = "BLACK";
	S.msgfont = "Song Body";
S.msgsize = "15";
	} LTalk.prototype.setData = function (content) {var s = this;
s.content = content;
	} LTalk.prototype.showData = function () {var s = this; for (var key in s.content) {trace ("----------No."
		+key+ "----------");
		Trace ("Name:" + s.content[key].name);
		Trace ("MSG:" + s.content[key].msg);
	Trace ("Face:" + s.content[key].face);
	} LTalk.prototype.setFaceStyle = function (Styledata) {var s = this; if (!styledata.x) {S.facex = 0;}
	Else{s.facex = styledata.x;} if (!styledata.y) {S.facey = 0;}
Else{s.facey = STYLEDATA.Y;} LTalk.prototype.setNameStyle = function (styledata) {VAR S = this; if (!styledata.x) {S.namex = 0;}
	Else{s.namex = styledata.x;} if (!styledata.y) {S.namey = 0;}
	Else{s.namey = STYLEDATA.Y;} if (!styledata.color) {S.namecolor = "black";}
	Else{s.namecolor = Styledata.color;} if (!styledata.font) {s.namefont = "Arial";}
	Else{s.namefont = Styledata.font;} if (!styledata.size) {s.namesize = "15";}
Else{s.namesize = styledata.size;}
	LTalk.prototype.setMsgStyle = function (Styledata) {var s = this; if (!styledata.x) {S.MSGX = 0;}
	ELSE{S.MSGX = styledata.x;} if (!styledata.y) {s.msgy = 0;}
	Else{s.msgy = STYLEDATA.Y;} if (!styledata.color) {S.msgcolor = "black";}
	Else{s.msgcolor = Styledata.color;} if (!styledata.font) {s.msgfont = "Arial";}
	Else{s.msgfont = Styledata.font;} if (!styledata.size) {s.msgsize = "15";}
Else{s.msgsize = styledata.size;}
	LTalk.prototype.wind = function (Num,completefunc) {var s = this;
	if (!num | | | num = null) num = 0;
	if (!completefunc) completefunc = null;
	S.talkindex = num;
	S.removeallchild (); if (S.talkindex < s.content.length) {var Talkobject = S.content[s.talkindex];
		var facebitmapdata = new Lbitmapdata (talkobject.face);
		var facebitmap = new Lbitmap (facebitmapdata);
		facebitmap.x = S.facex;
		FACEBITMAP.Y = S.facey;
		S.addchild (FACEBITMAP);
		var name = new Ltextfield ();
		name.x = S.namex;
		Name.y = S.namey;
		Name.size = s.namesize;
		Name.color = S.namecolor;
		Name.font = S.namefont;
		Name.text = Talkobject.name;
		Name.width = S.textwidth;
		Name.setwordwrap (True,name.getheight () +5);
		S.addchild (name);
		var msg = new Ltextfield ();
		msg.x = S.MSGX;
		Msg.y = S.msgy;
		Msg.size = s.msgsize;
		Msg.color = S.msgcolor;
		Msg.font = S.msgfont;
		Msg.text = talkobject.msg;
		Msg.width = S.textwidth;
		Msg.setwordwrap (True,msg.getheight () +7);
		Msg.wind (Completefunc);
	S.addchild (msg);
	}else{Trace ("Error:param exceeds the size of the content!");
	} LTalk.prototype.clear = function () {var s = this;
	S.removeallchild ();
S.die (); }
When used, just write the code:


var talkcontent = [
	{name: ' [Yorhom] ', msg: "Hello, Lufy", face:imglist["Yorhom_face"]},
	{name: "[Lufy]", msg: "Hello, Yorhom ", face:imglist[" Lufy_face "]},
	{name:" [Yorhom] ", msg:" What version is the latest version of Lufylegend? " ", face:imglist[" Yorhom_face "]},
	{name:" [Lufy] ", msg:" ... You don't know what you're looking at. ", face:imglist[" Lufy_face "]},
	{name:" [Yorhom] ", msg:" ... Said too ", face:imglist[" Yorhom_face "]}
;
var talk = new Ltalk (talkcontent);
AddChild (talk);
Talk.wind ();
By the way, Ltalk constructs the dialog content parameter is an array of JSON format, it should be completed after the game picture is loaded and then initialized, otherwise show the dialogue avatar.

Finally the test link to everyone:

Http://www.cnblogs.com/yorhom/articles/3132075.html

Enter and click on the black box to start the conversation. I wish you a happy Test ~


We'll talk about it in the next day.

Thank you for reading this article, support is the greatest encouragement. (^_^)


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

you are welcome to reprint my article. 

Reprint Please specify: Transferred from Yorhom ' s Game Box

Http://blog.csdn.net/yorhomwang

Welcome to keep an eye on my blog