使用Html5+C#+微信 開發移動端游戲詳細教程 :（五）游戲圖像的加載與操作

當我們進入游戲時，是不可能看到所有的圖像的，很多圖像都是隨着游戲功能的打開而出現，

比如只有我打開了“寶石”菜單才會顯示寶石的圖像，如果是需要顯示的時候才加載，

會對用戶體驗大打折扣，假如用戶的手機信號不太好，那么點擊菜單將一片空白，

這不是我們希望的效果，只有一種情況是臨時加載，就是不可預見的圖像，比如排行榜，

我並不知道我刷新一下排行榜會有哪些人會排到前10名，那么只有通過臨時加載這些人的頭像才能正確顯示，

這在后續的教程中會講解，其余游戲本身的圖像都是可預見的，我們通過運用游戲載入讀條的類，一次性將素材全部加載，並顯示Loading效果。

 

定義全局圖像數組，存入要加載的圖像：

var loadData = [
    {name: "bbtn", path: "images/bbtn.png"},
    {name: "bg", path: "images/bg.jpg"},
    {name: "gongjili", path: "images/gongjili.png"},
    {name: "gwhps", path: "images/gwhps.png"},
    {name: "gwhpsbg", path: "images/gwhpsbg.png"},
    {name: "headborder", path: "images/headborder.png"},
    {name: "jinbi", path: "images/jinbi.png"},
    {name: "rbtn", path: "images/rbtn.png"},
    {name: "userinfo", path: "images/userinfo.png"},
    {name: "zuanshi", path: "images/zuanshi.png"},
];

 

官方一共提供7種加載效果，LoadingSample1至LoadingSample7，也可以自己寫一個讀條類，官方API文檔：

http://www.lufylegend.com/api/zh_CN/out/classes/LLoadManage.html

 

將教程（三）中main方法的加載圖像方法刪除 用讀條類加載，實例化一個讀條類，

function main() {
    //游戲全屏顯示，自適應屏幕
    LGlobal.stageScale = LStageScaleMode.SHOW_ALL;
    LSystem.screen(LStage.FULL_SCREEN);
    //居中
    LGlobal.align = LStageAlign.TOP_MIDDLE;

    //加載Loading類讀取圖片，這里注意：loadingLayer是全局變量 並沒有用var關鍵字聲明
    loadingLayer = new LoadingSample5();
    addChild(loadingLayer);
    LLoadManage.load(loadData, function (progress) {
        loadingLayer.setProgress(progress);
    }, gameInit);
}

 

其中gameInit  代表加載完畢后要執行的方法，圖象加載完畢后，我們定義1個gameInit  方法來顯示背景圖片，

function gameInit(result) {

    //將圖像集結果賦值給數組並移除讀條界面
    loadData = result;
    removeChild(loadingLayer);
    loadingLayer = null;


    //新建一個背景層，添加到Canvas畫布
    BGDiv = new LSprite();
    addChild(BGDiv);


    //將圖像信息從數組中取出賦值給圖像數據變量
    var bitmapData = new LBitmapData(loadData["bg"]);
    //將圖像信息賦值給一個圖像
    var bgmapimg = new LBitmap(bitmapData);
    //添加圖像到背景層
    BGDiv.addChild(bgmapimg);

}

 

這樣我們就完成了一次性加載所有圖像，以后在使用時就可以直接通過數組取圖像: loadData ["圖像名稱"]

 

 

運行一下代碼，是不是感覺有點游戲的味道了，如果電腦配置比較好讀取較快看不到效果的話，

可以設置一個錯誤的圖片路徑，永遠讀取不到的話就會停留在讀條界面，就可以看到效果了。

 

本篇源代碼+素材 下載地址：http://pan.baidu.com/s/1cEbn90

 

下一篇我們將講解  游戲界面布局與性能優化