轩辕春秋文化论坛 - Powered by Discuz! Board

标题: 制作地图 [打印本页]

作者: 浮生宛若寄 时间: 2006-1-8 19:43

从曹操传战斗界面抓一张屏幕图。使用 ps 将其镂空。

图片附件: bg.gif (2006-1-8 19:43, 33.63 K) / 该附件被下载次数 123
http://xycq.org.cn/forum/attachment.php?aid=11462

作者: 浮生宛若寄 时间: 2006-1-8 19:44

利用 van 兄弟制作的资源观察工具。提取战场。

图片附件: a.gif (2006-1-8 19:44, 351.5 K) / 该附件被下载次数 136
http://xycq.org.cn/forum/attachment.php?aid=11463

作者: 浮生宛若寄 时间: 2006-1-8 19:51

将上面两张图片保存到电脑，开始下一步制作。

按上次所说的使用 vs.net 2003 新建一个网页。

将网页的模式改为 GridLayout。

插入图像为刚才的战场。

图片附件: gridlayout.png (2006-1-8 19:51, 4.03 K) / 该附件被下载次数 113
http://xycq.org.cn/forum/attachment.php?aid=11464

作者: 浮生宛若寄 时间: 2006-1-8 19:59

再插入地图。

此时，由于地图放入在后，会将镂空战场遮住。这是层的叠放次序的问题。

默认情况下，在 html 源文件中，按出现次序安排层的叠放。所以我们可以
1) 在源文件中,更换两段 IMG 的先后次序.

或

2) 人工指定镂空战场的次序小于地图.

我们使用第二种方法.叠放次序的属性为样式的 z-Index.
z-Index 越大越靠前.

更换二者的顺序.

图片附件: zIndex.png (2006-1-8 19:59, 11.47 K) / 该附件被下载次数 116
http://xycq.org.cn/forum/attachment.php?aid=11465

作者: 浮生宛若寄 时间: 2006-1-8 20:01

在设计器中将两张图片的顶角对齐,这时的效果为.

图片附件: look1.png (2006-1-8 20:01, 257.25 K) / 该附件被下载次数 109
http://xycq.org.cn/forum/attachment.php?aid=1112

作者: 浮生宛若寄 时间: 2006-1-8 20:09

下面控制只显示镂空区域的内容.在原设计的 640 * 480 的分辨率下,曹操传的战场为 13 * 7 个格子,每个格子为 48 * 48, 亦即 624 * 336 的区域.

从属性窗口找到 style 对话盒.

设置 clip 区域.

图片附件: clip.png (2006-1-8 20:09, 14.64 K) / 该附件被下载次数 124
http://xycq.org.cn/forum/attachment.php?aid=11466

作者: 浮生宛若寄 时间: 2006-1-8 20:18

至此,界面效果与真正的曹操传差别已经不大了.

下面设置鼠标能力.

鼠标在贴边的 48 像素以内,都会导致移动.这个通过一段 js 代码实现.

贴边事件并不存在,适合我们的事件为鼠标移动事件.亦即 onmousemove.

编写 onmousemove 处理代码. 为地图 img 增加 id="imgMap" 和onmousemove="handleMouseMove()" 说明.

编写 script 块.
<script>
   function handleMouseMove()
   {
         ... (怎么写)
   }
</script>

我们需要做两步,
第一,判断归边.
第二.移动 clip 的左上角.

作者: 浮生宛若寄 时间: 2006-1-8 20:33

居然没捕获到移动?

不要担心,一定可以找到办法的.原因就是我们的镂空图片,虽然镂空了,但是捕获鼠标移动的依然是这张图片而不是地图.

第一个办法是改变叠放次序.现在我们发现,地图因为有剪辑,所以不会有那么大.

第二个办法是把鼠标移动处理函数挂在镂空战场上.

这里采用第一个办法.

好了,现在可以提示左边了.

图片附件: left_catch.png (2006-1-8 20:33, 44.64 K) / 该附件被下载次数 134
http://xycq.org.cn/forum/attachment.php?aid=11469

作者: 浮生宛若寄 时间: 2006-1-8 21:08

用到的基本算法已经说完.不再多写了.内容有错漏的地方,已做修复.

下面给出的是完整的 html 文件.

附件: HTMLPage1.htm (2006-1-8 21:08, 1.75 K) / 该附件被下载次数 181
http://xycq.org.cn/forum/attachment.php?aid=11470

作者: 南极 时间: 2006-1-9 03:09

浮生兄开始做技术准备拉，偶也要去弄个vs.net玩下。

作者: 金圭子 时间: 2006-1-10 01:26

全部能看懂，技术难度不高，都是html和js的基础（不过自己没做过，如果自己做的话可能还是要调试好久的吧）
不过那个设计器是？？？我一直拿ue写网页的，哎呀呀…………

作者: 浮生宛若寄 时间: 2006-1-10 20:02

vs.net

兄弟很有天赋哈，一定要来帮忙~~

欢迎光临轩辕春秋文化论坛 (http://xycq.org.cn/forum/)