欢迎来到Will的博客

Sirius2D入门(一)

Html5 will 527℃ 0评论

Sirius2D引擎简介

天狼星2D(Sirius2D)是国内第一款以WebGL为渲染核心的HTML5跨平台游戏引擎,基于Sirius2D你可以快速轻松地构建属于自己的高品质HTML5游戏。Sirius2D的核心理念为“精于源,修于行,泽于众”。通过文档、案例、社区资源、网络教程与实体书籍,手把手地教会开发者掌握HTML5游戏开发这门手艺。官网地址:http://www.sirius2d.com/

1. 入门——如何显示一张图片

本文将以官方例子为例,讲解最基本的如何显示一个图片。(PS:本人刚学习该引擎,总有理解不到的地方,请大家多多包涵并斧正。高手可以直接绕道了)

首先引入引擎文件,Sirius2d.1.1.1.min.js,可在官网下载,然后创建自己的js文件,Main.js,并创建主类,主要结构如下:

this.demo=this.demo||{};
(
  function(){
    demo.Main=Class(
      {

      }
    );
  }
)();

定义游戏的静态变量

 STATIC :
  /** @lends demo.Main */
  {
     /**
         * 舞台
     */
    stage : null,
    /**
         * 场景
    */
    scene : null,

    /**
         * 游戏资源
    */
    assets : null
  },

主类的初始化

此方法类似于高级语言的构造函数,当初始化主类时,此方法会自动执行。可自行搜索js的面向对象编程了解。
在此方法中首先需要创建舞台,即初始化Stage2D这个对象。然后预加载资源。其中progress和fileload是引擎自带方法,表示资源加载时和加载完成时要执行的函数。而_handleFileLoad和handleOverallProgress是我们自定义的函数,将这两个函数绑定到progress和fileload中,此时资源加载时会执行我们自定义的函数。

initialize : function(canvasId, width, height)
            {

                //创建舞台
	       //build stage
                demo.Main.stage = new ss2d.Stage2D(canvasId, width, height);
		//加载文本
                this.txt = new ss2d.TextField(256,32);
                this.txt.setFontSize(16);
                this.txt.setColor(0xff,0xff,0xff);
                this.txt.setText("进度");
                this.txt.setX(120);
                this.txt.setY(20);
                ss2d.stage.addChild(this.txt);
                //预加载资源列表
		        //list of preloading assets
                this._manifest =
                [
                    {src:"images/logo.png", id:"logo"}
                ];

                //把事件处理函数存放在demo中
                //add event handler to the game
                demo["handleFileLoad"] = this._handleFileLoad.bind(this);
                demo["handleOverallProgress"] = this._handleOverallProgress.bind(this);

                //资源加载器
                //assets loader
                demo.Main.assets = new ss2d.LoadQueue(true);
                demo.Main.assets.on("fileload", demo["handleFileLoad"]);
                demo.Main.assets.on("progress", demo["handleOverallProgress"]);
                demo.Main.assets.loadManifest(this._manifest);
            },

资源加载函数

在上面我们自定义了handleFileLoad和handleOverallProgress,此时我们实现这两个函数。
资源加载时我们需要显示资源加载进程,下面方法就是实现该需求。

 /**
             * 资源文件加载进度事件处理器
             * progress bar handler
             * @param e
             * @private
             */
_handleOverallProgress : function(e)
            {
                var str = String(demo.Main.assets.progress).slice(2,4);
                this.txt.setText("正在加载......" + str + "%");

            },

下面方法就是资源加载完毕时执行的函数。此处需要记住的是,该函数表示每加载完一个资源都要执行该方法,所以需要定义一个变量表示已加载的资源个数_loaded,当_loaded等于资源总个数时,则表示资源已全部加载完,此时释放函数,并且进入下一阶段方法。

/**
             * 资源文件加载完毕事件处理器
		     * handler on file loaded
             * @param e
             * @private
             */
            _handleFileLoad : function(e)
            {
                this._loaded++;
                if (this._loaded == this._manifest.length)
                {
		     ss2d.stage.removeChild( this.txt);
                    demo.Main.assets.removeEventListener("fileload", demo["handleFileLoad"]);
                    demo.Main.assets.removeEventListener("progress", demo["handleOverallProgress"]);
                    demo["handleFileLoad"] = null;
                    demo["handleOverallProgress"] = null;
                    this._init();
                }
            },

显示图片

下面就是我们要实现的主要功能–显示图片了。看代码:
该方法会创建一个纹理对象(官方释义:纹理贴图类 游戏里显示图像的核心封装类,所有的图像必须转换为纹理才能提交给引擎使用),然后将该纹理对象交给影片剪辑类(不建议多用,一般用于显示测试,后处理,单个大背景,如果显示数量很多建议用Scene),最后添加到舞台类中,即可显示。

_init:function()
            {

                //是否根据浏览器动态大小修改舞台尺寸
                ss2d.stage.setAutoAdjustToBrowser(true);
                ss2d.stage.adjustToBrowser(ss2d.screenAdjust.Ratio);

                //显示FPS
                ss2d.stage.showStats(true);

                //创建纹理对象
		       //create texture
                var texture=new ss2d.Texture(demo.Main.assets.getResult("logo"));

                //创建一个影片剪辑类
		       //create movie clip
                this.mc=new ss2d.MovieClip(texture);
                this.mc.setCenter(true);
                //添加到场景显示
		       //add movie clip to the stage
                ss2d.stage.addChild(this.mc);

                this.mc.setX(ss2d.Stage2D.stageWidth/2);
                this.mc.setY(ss2d.Stage2D.stageHeight/2);

            }

在html页面中显示

<!DOCTYPE html>
<html>
 <head>
   <meta charset="utf-8" />
   <title></title>
 </head>
 <body>
   <canvas id="canvas"></canvas>
   <script src="js/Sirius2d.1.1.1.min.js" type="text/javascript" charset="utf-8"></script>
   <script src="js/Main.js" type="text/javascript" charset="utf-8"></script>
   <script type="text/javascript">
     new demo.Main("canvas",1024, 512);
   </script>
 </body>
</html>

结果显示

至此,所有的工作已经完成,看看结果什么样吧。

QQ图片20141214160917

转载请注明:Will的博客 » Sirius2D入门(一)

喜欢 (0)or分享 (0)