关闭

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

标签: krkravg教程tjs
1971人阅读 评论(1) 收藏 举报
分类:

■注意事项■
※如果你刚接触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的说明档里也都有提到过。因为本着“实用教程”的原则,是希望这里提到的东西能在实际使用中能够派上用场的。下次争取讲些更“高端”的内容……如果还有下回的话。。。


0
0

猜你在找
深度学习基础与TensorFlow实践
【在线峰会】前端开发重点难点技术剖析与创新实践
【在线峰会】一天掌握物联网全栈开发之道
【在线峰会】如何高质高效的进行Android技术开发
机器学习40天精英计划
Python数据挖掘与分析速成班
微信小程序开发实战
JFinal极速开发企业实战
备战2017软考 系统集成项目管理工程师 学习套餐
Python大型网络爬虫项目开发实战(全套)
查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:26346次
    • 积分:662
    • 等级:
    • 排名:千里之外
    • 原创:13篇
    • 转载:0篇
    • 译文:28篇
    • 评论:1条
    文章分类
    最新评论