【KRKR进阶实用教程】1、捕获鼠标位置——存档界面制作

原创 2013年07月24日 22:11:12

■注意事项■
※如果你刚接触krkr,那么阅读前强烈推荐先阅读水螅姐的教程把KAG等基本知识学明白:猛击这里
※本文建立在读者已经读过一遍krkr自带tjs文档的前提下而撰写,所以不对其中出现的一些在tjs文档里已经详尽说明的函数、方法、语法等基础知识再做过多的说明,如果阅读过程中有看不懂的地方,请去参考tjs文档。
※本文使用的KRKR版本为KCDDP上分享的KCDDP KAGeXpress 3.0汉化版。
※为了照顾非IT人士,一些IT方面的基础知识会附带一些说明链接,仅供参考,百度google才是您更好的选择。

学习Kag的过程是一帆风顺的,但是学习tjs的过程确实有些小坎坷。最大的原因就是网上能找到的资料基本全是日文的,中文的关于写、改tjs的教程实在是很少有人做。对于没有一些基础的人来说,这真是略难啃的一个东西。所以一直想做这样的一个教程,把一些学习到的东西分享给大家。

废话不多说,下面开始正文。


第一篇将介绍基础中的基础……从最简单的捕获鼠标位置应用说起,相信许多人都用过这个功能了吧,因为KAG文档后部分对这些常用TJS都进行了一些说明来着……这个也很适合拿来做TJS的入门。
下面范例的脚本,在这里下载:请点击。你需要自己新建一个工程,然后用这些东西去覆盖,就可以跑起来了。

假如说我们现在要做一个存档界面,准备一张背景,然后几个存档按钮,似乎就OK了。假如设计四个存档点,我们用最最古老的办法这样写:

[current layer=message0]
[er]
;存档位1号
[locate x=50 y=120]
[button normal=save_1 over=save_2 on=save_1 storage="first.ks" target=*save exp="tf.savePos=1"]

;存档位2号
[locate x=220 y=120]
[button normal=save_1 over=save_2 on=save_1 storage="first.ks" target=*save exp="tf.savePos=2"]

;存档位3号
[locate x=390 y=120]
[button normal=save_1 over=save_2 on=save_1 storage="first.ks" target=*save exp="tf.savePos=3"]

;存档位4号
[locate x=560 y=120]
[button normal=save_1 over=save_2 on=save_1 storage="first.ks" target=*save exp="tf.savePos=4"]



这就是所谓的hardcode,写一个存档点的代码,然后各种复制粘贴就可以了。如果想要十个存档点,就再复制粘贴六次。如果想要100个存档点,就再复制粘贴90次……是不是略多啊!明明是重复率很高的代码,可不可以写得更简洁一点呢?
于是可能好多人都尝试过用标签和jump构成的循环。下面用循环来画12个存档块

[current layer=message0]
[er]
[eval exp="tf.i=0"]
*startFor
[locate x=&(50+tf.i%4*170) y=&(120+tf.i\4*130)]
[button normal=save_1 over=save_2 on=save_1 storage="first.ks" target=*save exp="tf.savePos=tf.i+1"]
[eval exp="tf.i++"]
[jump target=*startFor cond="tf.i<12"]
[s]
效果图:


代码量超少有木有,一下子就高端洋气了许多。但是真正尝试这样写过的朋友可能都遇到过最致命的一个问题……那就是这12个存档点无论点击哪一个,都会显示”存档到13号位置”……也就是说这12个点击最后触发的exp="tf.savePos=?"的这个?值都一律是13
这是由于tf.i在你把整个页面都画好的时候,它的值已经是12了,这时候再点击触发exp,只会得到12+1=13,12个档位都是如此。于是这个存档瞬间就变得没有任何意义了,因为它的功能是有缺陷的。为了解决这个问题,我们需要使用坐标获取。
[button normal=save_1 over=save_2 on=save_1 storage="first.ks" target=*save exp="getSavePos()"]
点击的时候不是直接给变量赋值而是调用了一个函数,函数当然需要我们自己写。

@iscript
// 点击时获取点击的档位号
function getSavePos(){
	var x=kag.lastMouseDownX; // 获取上次点击时的鼠标X坐标
	var y=kag.lastMouseDownY; // 获取上次点击时的鼠标Y坐标
	
	tf.savePos = calSavePos(x, y)+1;
}

// 根据坐标x,y,计算所在的档位号
function calSavePos(x, y){
	//计算方式参照我们画档位按钮时的坐标[locate x=&(50+tf.i%4*170) y=&(120+tf.i\4*130)] 
	var xIndex = (x-50)\170;
	var yIndex = (y-120)\130;
	return xIndex + yIndex*4;
}
@endscript
现在,再点击存档位按钮,一切就正常了,和用hardcode写的效果是一样的,但是代码量大大减少。就算要写100个档位也只是改几个数字而已。


恭喜从石器时代进化到了蒸汽时代,下面试着让系统再丰满一些,增加存档预览功能。
我们只需要把鼠标移到存档位上,便会自动显示此存档的相关讯息(比如存档日期、存档标题、存档时角色正在说的话等内容)。不是点击,只是鼠标移到上面就可以显示,这要怎么实现呢。
[button normal=save_1 over=save_2 on=save_1 storage="first.ks" target=*save exp="getSavePos()" onenter="savePreview()" onleave="hideSavePreview()"]
savePreview()和hideSavePreview()函数也需要我们自已来写。

// 点击时获取点击的档位号
function savePreview(){
    var x=kag.fore.base.cursorX; // 获取目前鼠标所在X坐标
    var y=kag.fore.base.cursorY; // 获取目前鼠标所在Y坐标
    
    var pos = calSavePos(x, y)+1;
    var msgLayer = kag.fore.messages[1];
    msgLayer.font.height=24;
    msgLayer.drawText(0,0,"存档位"+pos+"的预览信息XXXXXX在此!",0xffffff);
    msgLayer.visible=true;
}

// 预览信息消失
function hideSavePreview(){
    var msgLayer = kag.fore.messages[1];
    msgLayer.clear();
    msgLayer.visible=false;
}

这样的话鼠标移到档位上时,会显示预览信息。从档位移开时,预览信息就消失了。
对这部分代码简单提几点。kag.fore.base.cursorX得到的是鼠标的位置。kag.fore.base就是我们一般在KAG里写的那个layer=base层,而cursorX是它的一个属性。里面记录的就是鼠标在其之上的X坐标,因为大家知道base层是和屏幕等大小并且不能移动,所以鼠标在base层上的坐标也就一定是在屏幕上的坐标了。它跟lastMouseDownX的区别在于,lastMouseDownX需要点击之后才会变化,而cursorX是随时变化的。
calSavePos()函数就是上面写过的那个函数啦,这里直接调用它了。把通用的、多次用到的代码写成函数然后再调用是很好的习惯。
var msgLayer = kag.fore.messages[0];是拿到message0层,然后对它直接进行操作。
drawText就是在图层上写字的功能啦。0,0分别是X,Y坐标,第三个参数是要写的文字,第四个参数是字的颜色。注意这个写字是瞬间写上去的,不会一个一个蹦。
除了可以在message层上写字,直接在图片层上写字也是可以的。
font.height就是设置字号
visible就顾名思义了,为true时可见,false不可见。
clear()方法是用来把这个图层上的东西清空的,在message层功能就相当于[er]了。

效果图:

至此,本次的教程就结束了。介绍了一些获取鼠标位置的常用属性,获取图层的方法,在图层上写字的方法,以及它们在一个界面中的实际应用。这些都是基础中的基础,对于有一定的KRKR使用经验的人,就算是KAG党恐怕也早就了解了吧。何况这些知识的使用方法其实在KAG的说明档里也都有提到过。因为本着“实用教程”的原则,是希望这里提到的东西能在实际使用中能够派上用场的。下次争取讲些更“高端”的内容……如果还有下回的话。。。


版权声明:本文为博主原创文章,未经博主允许不得转载。

相关文章推荐

krkr实现滚动存档界面示例

  • 2010-11-28 14:21
  • 3.63MB
  • 下载

干货来袭——LoadRunner实用教程年度大汇总

LoadRunner是一款非常优秀的负载测试软件,可以精确洞察端到端系统性能,深受广大测试人员的好评,今天给大家总结了loadrunner的多篇优秀教程文章,供大家参考学习。

第4章 ISE开发环境使用指南[FPGA开发实用教程]——4.3.5 功耗分析以及XPower的使用

1.功耗分析简介 在FPGA 设计中,功耗分析是成功设计的重要环节。针对 FPGA 设计中的功耗分析,Xilinx 公司推出了简单的速查表格和专用的功耗分析工具——XPower。对于开发初期的...

新书《Java EE实用教程——基于WebLogic和Eclipse(第2版)》目录

经过了一年多的修改,新书《Java EE实用教程——基于WebLogic和Eclipse(第2版)》终于出版了。  相对于本书的第一版,这个版本的改动如下:  1)增加了部分内容,包括RMI、Web ...

第4章 ISE开发环境使用指南[FPGA开发实用教程]——第1节 ISE套件的介绍与安装

第1节 ISE套件的介绍与安装 4.1.1 ISE简要介绍 Xilinx是全球领先的可编程逻辑完整解决方案的供应商,研发、制造并销售应用范围广泛的高级集成电路、软件设计工具以及定...

摄影教室:数码摄影区域曝光法实用教程

区域曝光法在20世纪30年代由安塞尔·亚当斯和佛列德·亚契提出。这一理论为摄影曝光建立了标准流程,以保证能在任何环境下——包括逆光、极大光比之类能完全欺骗相机测光系统的场景——得到准确曝光。  ...
  • z_h_s
  • z_h_s
  • 2014-12-02 21:56
  • 1023
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:深度学习:神经网络中的前向传播和反向传播算法推导
举报原因:
原因补充:

(最多只允许输入30个字)