JS版植物大战僵尸里素材获取详解

    版权声明：转载时请以超链接形式标明文章原始出处 http://blog.lonelystar.org/post/6.html

    有不少人说过

    “你游戏里的素材是从哪里弄到的呀这么多

    游戏我也会做只是我不会美工而已所以只好算了”

    其实偶既不是美工也不是专业前端人士只是个JS爱好者

    JS游戏中的素材都是想方设法从植物大战僵尸原作中获得的

    当然获取也没那么容易

    这个JS版植物僵尸基本一半时间是用于写程序

    而获取和处理素材也占用了一半时间

    下面偶介绍一下获取素材的过程

     

    首先要在本机装上植物大战僵尸原版

    当然是中文汉化版的最好不然做游戏中就没有中文素材了

    然后再安装好游戏的三种辅助软件：


    1。9项属性修改器，其中要用到的是用来停止僵尸行动的那个功能

    2。BT修改器中文版，可以用来调僵尸和植物，以及做其他属性修改

    3。辅助工具3.1，用来跳关，打包拆包游戏素材，允许后台运行等

     

    然后必不可少的还有录像和转换软件

    说明一下：游戏素材包里的植物和僵尸素材基本都是零碎的肢体

    没有现成的GIF动画

    而JS的效率所限难以像原作那样临时用程序拼接肢体

    所以只能获取GIF动画作为游戏素材


    偶用的是超级转霸

    有屏幕录像、格式转换、视频播放的功能
     

    GIF处理软件偶用的是GIF Movie Gear汉化版

    这个小软件很简单实用，功能也比较强大

    其他偶尔也用到一下Photoshop和画图板

    主要是用于转换格式和临时编辑


    获取gif简述过程如下

    1。拆包(main.pak)，在images目录下找到水池背景，用GIF处理工具把整个图片透明化，打包

    2。进入小游戏“谁笑到最后”

    3。不要点击开始进攻按钮，直接就可以开始获取素材了

    这个时候背景是灰色的，除了中间的水池

    在陆地上种植自己想要获取素材的植物

    然后实用超级转霸的录像功能开始录像转换成GIF格式

    僵尸素材的获取要麻烦些

    先用BT修改器调出想要的僵尸

    再用9项属性修改器可以停止僵尸的前进

    然后实用超级转霸进行录像

    当然一个僵尸要获取多种动作

    比如正常的行走、倒地死亡、攻击植物、跳跃等

    每个植物和僵尸一般都有好几个gif，所以录像要把需要的动作都要录到

    4。获取了GIF素材后

    要对相同的植物和僵尸的GIF进行大小上的剪裁

    比如领带僵尸如果有5个GIF

    那么就把这几个GIF都剪裁成相同大小

    还要保证在不同GIF切换时看起来僵尸的位置要不变的而不是忽上忽下忽左忽右

    然后就是一系列GIF的处理

    大小、位置、循环、动作、调色板、帧数、优化等等

     

    大部分素材都是在这个小游戏关卡中获取

    当然也要看情况用到其他关卡场景比如解谜模式等

     

    素材弄起来特别麻烦

    最需要的不是美工的专业知识

    而是耐心和全面细致的考虑

    而且既要考虑到网络下载的速度也要考虑到GIF的质量

    所以像什么缺胳膊掉腿烂饰品的中间GIF就没做了

    既是觉得没必要也是一种小小的偷懒吧

    GIF太多太耗时间谁来写程序啊。。。

    那句老话

    世上无难事只怕有心人

    没有美工底子的偶花了那么多精力弄这些素材

    还有不少人说粗制滥造呢 T _ T

    Tag：javascript  植物大战僵尸  素材  
    lonelystar 发表于2011年2月8日 | 分类：JavaScript植物大战僵尸 | 评论: 29 | 引用: 0 | 浏览:

      本文现有29 条评论

    • 1  最后那段话是跟小朋友解释的聊天记录汇总吧Haha

      楼主 于 2011-2-10 11:34:11 回复
      不止小朋友，
      大朋友也有。。。

      虫儿 | 发表于2011-2-10 10:46:24 [回复]

    • 2  V5

      丫曰 | 发表于2011-2-10 11:35:20 [回复]

    • 3  http://www.jyrclub.com/club/zwdz/index.htm，进入游戏显示不了。请帮忙解决。

      楼主 于 2011-2-11 21:23:32 回复
      偶进去看了，显示得很正常嘛？

      bigfoot | 发表于2011-2-10 12:41:32 [回复]

    • 4   你好！！可不可以把你收集的素材发给我啊，真的很需要~~谢谢了！！774907881@qq.com

      楼主 于 2011-4-8 14:29:34 回复
      到http://pvz.lonelystar.org点“关于”
      偶在网页上有发布下载地址
      一个是A5下载的
      一个是站长之家的

      enendala | 发表于2011-4-8 10:31:03 [回复]

    • 5  下了源代码看了，js全都写在一行里，天啊，看死我了.....

      lonelystar 于 2011-4-18 18:11:15 回复
      Hehe
      网上是经过压缩的代码
      你可以用工具把它格式化了再看嘛
      比如站长网就有。。。

      小小yu | 发表于2011-4-9 22:54:29 [回复]

    • 6  好羡慕你哦

      lonelystar 于 2011-4-18 18:12:17 回复
      Haha
      没啥好羡慕的啦
      虽然偶长得还比较天生丽质。。。

      我叫李龙 | 发表于2011-4-10 16:17:51 [回复]

    • 7  经过压缩的代码?

      楼主 于 2011-4-21 8:05:32 回复
      只是去除空格换行注释没混淆过

      G字头老大 | 发表于2011-4-20 20:03:04 [回复]

    • 8  我对您的敬仰之意，如那滔滔江水，连绵不绝。

      哥们，给我来个邮件，表示你收到了我的敬意。

      rulioo | 发表于2011-4-27 0:02:01 [回复]

    • 9  植物大战僵尸官方除了flash版的. 用firefox插件把flash下载到本地. 然后用flash反编译工具反编译. 可以获取所有的actionscript源码和素材. 整个过程顺利的话一个小时内搞定.

      楼主 于 2011-5-9 22:45:09 回复
      直接反编译当然可以获取flash中的代码和素材了
      不过flash毕竟跟js不同
      flash能用的素材js不一定能用呀
      就像偶自己有安装版的植物僵尸
      已经解压出了里面所有的素材
      但是里面的动画基本都无法直接使用

      peter | 发表于2011-5-4 18:51:59 [回复]

    • 10  写JS很多年，你还是第一个感到佩服的人，希能回个邮件交流交流。

      Ander | 发表于2011-5-30 15:39:10 [回复]

    • 11  是不是违反版权了？
      这样的山寨作品一旦用于商业不会被起诉吗？

      楼主 于 2011-6-29 20:27:23 回复
      没用于商业，这只是个人非盈利性质的网站而已

      Cmaj7 | 发表于2011-6-29 3:28:17 [回复]

    • 12  厉害

      楼主 于 2011-8-5 12:05:27 回复
      Shame

      lin1605 | 发表于2011-7-1 12:39:01 [回复]

    • 13  不知你用了多长时间，如果是我半年也搞不来

      楼主 于 2011-8-5 12:06:21 回复
      因为是业余搞这个，时间比较少，大约持续了半年左右已经基本成型，记得当时是10关左右吧。

      panda | 发表于2011-8-4 16:23:33 [回复]

    • 14  这个植物大战僵尸不符合W3C HTML5 规范，严重不符合！

      Gary | 发表于2011-8-8 12:47:32 [回复]

    • 15  MM是个好人

      白菜 | 发表于2011-8-9 2:17:59 [回复]

    • 16  刚刚在腾讯应用上看到JSPVZ才知道大名鼎鼎的lonelystar，相当震惊，相当震惊

      StarFan | 发表于2011-8-16 10:24:40 [回复]

    • 17  嘿嘿，果然实力派。之前的 一个wp 僵尸主题 也被我改造了一点 pvz的 味道。

      wugee | 发表于2011-10-1 9:31:08 [回复]

    • 18  您对javascript的理解，还有细心，智慧。。我对您膜拜的之心犹如死循环滔滔不绝。。。

      shell | 发表于2011-10-11 12:38:31 [回复]

    • 19  哈哈，来看看

      welpher.yu | 发表于2011-10-27 12:56:45 [回复]

    • 20  求友链呀，僵尸姐

      welpher.yu | 发表于2011-10-27 12:59:45 [回复]

    • 21  我很佩服您，希望您能成为朋友。我是7年程序经验的程序员，喜欢写程序。公司里用的是C#，自己用Python, Javascrip写些小程序。

      程鑫 | 发表于2011-11-2 1:17:43 [回复]

    • 22  、、、、、、、、、、、、、、、、、、、、、、、、

      铷洳 | 发表于2012-1-3 16:29:08 [回复]

    • 23  ppppppppppppppppp

      铷洳 | 发表于2012-1-3 16:29:27 [回复]

    • 24  不知道

      不知道 | 发表于2012-1-13 7:14:56 [回复]

    • 25  不做声

      不知道 | 发表于2012-1-13 7:15:33 [回复]

    • 26  不知道反对

      不知道 | 发表于2012-1-13 7:15:58 [回复]

    • 27  你好，我是一个菜鸟，看您的源码，好多地方看不太懂，请您不吝赐教，比如您的代码里没有使用CSS啊？如果没有的话，那这些this.LoadAccess=null;
      this.InitLawnMower=null;
      this.StartGame=null;
      this.ChoseCard=this.MPID="";
      this.PicNum=this.AccessNum=this.MCID=this.Chose=0;
      this.Monitor=null;
      那这些LoadAccess,InitLawnMower,什么的都可以这样同时定义和赋值的啊，
      还有这个f.StandGif，这个StandGif没有定义过啊，怎么直接这样写的，呵呵
      对不起，我是一个菜鸟，可能问题很幼稚，请不吝赐教，谢谢

      楼主 于 2012-2-15 15:22:33 回复
      可以这样赋值，这样写只不过是一个习惯而已。
      偶习惯数字和字符串连接着写，对象数组连接写就会出问题，所以连null，undefined等的赋值偶也习惯分开写了。性能上没啥区别。
      代码里肯定使用了css，不然界面怎么布局呢。
      StandGif，由于偶不清楚你指的是哪里，所以不好回答。这个在僵尸还是植物里是有定义的，具体偶不太记得了，要看代码。

      hyy | 发表于2012-2-7 17:24:25 [回复]

    • 28  作者可以考虑在代码里加些注释，或者出个代码的说明文档之类的，那样更有利于如我之辈的菜鸟们学习了，那将会非常感谢，呵呵

      楼主 于 2012-2-15 15:24:03 回复
      由于网上发布的是压缩过去掉注释的
      所以跟源代码会略有不同
      偶会考虑另外出个带有注释的完整文档之类

      hyy | 发表于2012-2-7 17:26:20 [回复]

    • 29  你好,我是个什么程序都不懂的,我只想把代码放到自己的页上增加些娱乐性,搞点人气而已,不是商业性的,所以我想问下你那代码里的登陆帐号和注册那里怎么能弄掉,或者说改成我自己的.如果改不了,那要怎样做啊/,我是啥都不懂的,如果你能帮我,就帮忙帮到底,我EMAIL是baso007@qq.com

      baso007 | 发表于2012-2-19 17:38:38 [回复]

    欢迎您发表评论：

     
    ◎欢迎参与讨论，请在这里发表您的看法、交流您的观点。