AS3IsoLib isometric 游戏引擎教程

AS3IsoLib 游戏列表 

 

AS3IsoLib 让开发者更方便地创建3D开发的引擎！

• Getting Started [DEMO] [CODE]
• Moving Blocks [DEMO] [CODE]
• Materials [DEMO] [CODE]
• Height [DEMO] [CODE]
• Camera [DEMO] [CODE]
• Interactivity [DEMO] [CODE]

 

去到导航页

先来个最简单 最基础的

package 

{

        import as3isolib.display.primitive.IsoBox;

        import as3isolib.display.scene.IsoScene;

        

        import flash.display.Sprite;

        

        public class IsoApplication extends Sprite

        {

                public function IsoApplication ()

                {

                        var box:IsoBox = new IsoBox();

                        box.setSize(25, 25, 25);

                        box.moveTo(200, 0, 0);

                        var scene:IsoScene = new IsoScene();

                        scene.hostContainer = this;

                        scene.addChild(box);

                        scene.render();

                }

        }

}

生成的是这个

 

 

 

google的图都被墙了 鄙人钦佩至极···

先添加的左边 长条 然后最右边的板砖 最后是中间的方块

如果加上这行代码 

scene.layoutEnabled = false;

那么 系统会按照添加顺序排序 

 

如果去掉了上面那句 

 

所以最好让系统自己排序吧~

code是

var box0:IsoBox = new IsoBox();
box0.setSize(25, 25, 25);
box0.moveTo(200, 0, 0);
var box1:IsoBox = new IsoBox();
box1.width = 10;
box1.length = 25;
box1.height = 50;
box1.moveTo(230, -15, 20);
var box2:IsoBox = new IsoBox();
box2.setSize(10, 50, 5);
box2.moveTo(200, 30, 10);
var scene:IsoScene = new IsoScene();
scene.layoutEnabled = false;
scene.hostContainer = this;
scene.addChild(box1);
scene.addChild(box2);
scene.addChild(box0);
scene.render();

 

as3isolib 的最原始类型 有各种各样的样式属性可供设置

这些属性包括

1.渲染类型  确定原始类型按照哪种模式进行渲染   render style

  可供选择的有 1.阴影模式 2.固体模式 和 3.线框模式

2.face line alphas 表面线条的透明度 多边形边缘的透明度

  face line colors 表面线条的颜色 多边形边缘的颜色

  face line thicknesses 线条的粗细 多边形边缘的粗细

  face alphas 多边形表面的透明度

  face colors 多边形表面的颜色

默认的渲染类型是    RenderStyleType.SHADED （阴影模式） 这个模式的意思是 如果有一个面和另外的面有颜色重叠的话 颜色会有变化 比如加深什么的·····

RenderStyleType.SOLID则会把每个面都设置为 #FFFFFF的颜色

RenderStyleType.WIREFRAME 的每个面都是透明的 不过依然可以接受鼠标点击事件

看下面这个例子 表面的透明度和颜色都被改变了.  正如你所看到的 因为每个面都设置了边框粗细. 

所以在后边的的面的边缘呈现出来了

 

var box:IsoBox = new IsoBox();

     box.styleType =   RenderStyleType.SHADED;

     box.faceColors = [ 0xff0000, 0x00ff00, 0x0000ff, 0xff0000, 0x00ff00, 0x0000ff ]

     box.faceAlphas = [.5, .5, .5, .5, .5, .5];

     box.setSize(25, 30, 40);

     box.moveTo(200, 0, 0);

                        

var scene:IsoScene = new IsoScene();

     scene.hostContainer = this;

     scene.addChild(box);

     scene.render();

如果用RenderStyleType.SOLID 则不会改变颜色

code如下：

box.styleType =   RenderStyleType.SOLID;

box.faceColors = [0xff0000, 0x00ff00, 0x0000ff, 0xff0000, 0x00ff00, 0x0000ff]

box.faceAlphas = [.5, .5, .5, .5, .5, .5];

效果如下

 

如果使用 RenderStyleType.WIREFRAME 来渲染  则会忽略表面的颜色和透明度

注意 阴影依然会渲染 因为阴影是场景渲染的 而不是原始二等角他本身~

code 如下：

box.styleType =   RenderStyleType.WIREFRAME;

box.faceColors = [0xff0000, 0x00ff00, 0x0000ff, 0xff0000, 0x00ff00, 0x0000ff]

box.faceAlphas = [.5, .5, .5, .5, .5, .5];

效果如下：

 

ohyeah~第三章完了 哈哈哈~