仙客来的html5

  闲话：前段时间种种机缘巧合，有幸进了“泰然”得以窥见Iven、子龙山人和一叶道长的庐山真面目，和这样的高手一起让人都不由得踌躇满志起来。跟大神们在一起是很愉快的，原本想跟着他们好好学习，斗志昂扬的想留在那里，能和他们一直并肩作战到退休。可是由家里去公司来回四个小时的公交路程（坐地铁基本纵穿整个成都市）让我这种很多年不坐班已经自由惯了的“散漫分子”超级不适应。每天天不亮就必须起床，天黑透了才能到家， 10天不到，我就脾气变得极差，无法控制自己的情绪。再三权衡后，我打算还是“宅”在家里“修炼”一段时间再说，不然以我这种菜鸟的级别，去给大神们扛“刀”都得体力不支，更何况说要帮着“打怪”了，呵呵。

    眼看同去的学生一个个学习进度都比自己快，心里那个急啊。更加之Iven希望我跟学生一样用“飞机资源”把Cocos2d-X引擎迅速熟悉后能帮着公司做些事情，我觉得好“鸭梨山大”。他不知道我这个只懂C++皮毛的“假老练”，是多么的厌倦Vsiual Studio，每次用个DX或游戏引擎啥的，光搭建编译环境对我这种已经年近不惑的中老年妇女都是一场折磨；每次实验课，因为一些系统或编译环境的问题，学生即便完全按照我给的代码做一个小DEMO都会暴出无数让我不能解决的“Error”；即便“一叶”和“Iven”提醒我JavaScript有很多“坑”……，我仍然想换下口味试试，我跟他们说有他们几个大神在，我摔进坑里爬起来会比较快。

    很快，对我这种有一定C++基础，只看过几行JavaScript，在这之前没用过Cocos2d-X，更没听说过Cocos2d-html5的Windows传统用户，我就遇到了第一个坑，那就是我不知道大神们给我们的飞行游戏相关资源里的plist文件是什么东西？

正题：

1、.plist文件简介

    plist文件全名Property List，属性列表文件。它是在做iOS开发时，经常用到的文件类型，扩展名为.plist ，文件是xml格式。通常用于储存用户设置，也可以用于存储捆绑的信息。

    如图1所示的xml文件内容，实际上就是存储了两个人的信息：

       Jack  phone_num: 1380111111   age:22

       Tom   phone_num: 1390111111   age:36

                  图1 一个简单的*.plist文件内容

    从直观来看，如图2的bg.png就是一张精灵列表。打开对应的bg.plist文件，我们可以看到如下的一些信息，

<?xml version="1.0" encoding="UTF-8"?>

<!DOCTYPE plist PUBLIC "-//Apple Computer//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">

<plist version="1.0">

 

  <dict>

        <key>frames</key>

        <dict>

            <key>background.png</key>

            <dict>

                <key>frame</key>

                <string>{{484,2},{480,852}}</string>

                <key>offset</key>

                <string>{0,0}</string>

                <key>rotated</key>

                <false/>

                <key>sourceColorRect</key>

                <string>{{0,0},{480,852}}</string>

                <key>sourceSize</key>

                <string>{480,852}</string>

            </dict>

            <key>btn_finish.png</key>

…………………………………………………………………………………………..

            <key>resume_sel.png</key>

            <dict>

                <key>frame</key>

                <string>{{52,970},{54,26}}</string>

                <key>offset</key>

                <string>{-2,-2}</string>

                <key>rotated</key>

                <false/>

                <key>sourceColorRect</key>

                <string>{{71,14},{54,26}}</string>

                <key>sourceSize</key>

                <string>{200,50}</string>

            </dict>

        </dict>

        <key>metadata</key>

        <dict>

            <key>format</key>

            <integer>2</integer>

            <key>realTextureFileName</key>

            <string>bg.png</string>

            <key>size</key>

            <string>{1024,1024}</string>

            <key>smartupdate</key>            <string>$TexturePacker:SmartUpdate:a9da1dd3317077be7392b640c24084cf:1/1$</string>

            <key>textureFileName</key>

            <string>bg.png</string>

        </dict>

    </dict>

</plist>

   由于篇幅所限，我没有把代码全部贴上，请自己下载。我利用了Cocos2d-html5引擎中的HelloHtml5World例子。

   首先创建一张跟canvas一样大小的（800，450）的白色背景的图片，假设将它取名为testScene.png。接着把你要查看的bg.plist文件和bg.png所在的文件夹“bg”和testScene.png都拷贝到项目文件里的“res”里面。在resource.js里添加资源路径，如下几行代码：

      var s_bg="res/bg/bg.png";

      var s_bg_plist="res/bg/bg.plist";

      var s_testScene="res/testScene.png";

   在g_resources数组里添加如图3所示灰色框里的三行代码。