使用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

 

下一篇咱們將講解  遊戲界面佈局與性能優化