【9RIA—伱永远不可以】—【s7教你做特效】4. 2.5D像素—那3D呢？

9RIA-伱永远不可以

转载：9RIA游戏开发者社区（天地会）
作者：伱永远不可以（原天地会大神）


大概是要发个专题吧....把自己学到的总结下，顺便能给不懂的同学们提供思路！
【s7教你做特效】系列教程（总目录）



还是先看效果：


大家所经常见到的2.5D是这样吗？


如何将 平面的图片 转换成2.5D的效果呢？

把xy坐标变成，xyz坐标！咱就说简单的，复杂的请百度..matrix3D。。。其实就是3d矩阵了，图形图像学的吧？


上面的图，就是把 2D变成2.5D的示意图...
能看出规律为  
y1=y*0.5//Y坐标被压扁了一半
x1=x+y*0.5;//X坐标，斜切？就是往右边倾斜....


有了XY，就差Z了，X就用 红色的浓度值来代表吧....
所以最后总结的坐标为：
x1=x+y*0.5;

y1=y*0.5;
y1+=red  (0<red<255)

所以只需要会简单的计算，和BitmapData类的 两个API就可以做出超级炫酷的效果！！！
贴上代码，别看长，仔细看，没那么复杂哦...对了，里面有个柏林噪点（暂不细说）



---代码直接贴到帧上！看看效果吧！

[Actionscript3] 纯文本查看 复制代码

import flash.display.BitmapData;
import flash.display.Bitmap;
import com.greensock.loading.BinaryDataLoader;
import flash.geom.Rectangle;
import flash.geom.ColorTransform;
import flash.display.GradientType;
import flash.geom.Matrix;
import flash.geom.Point;

var r:Number =80

var bd:BitmapData =new BitmapData (r*2,r*2,true,0x0)


var bd2:BitmapData =new BitmapData (bd.width *4,bd.height *4,true,0x0)

var rect:Rectangle =new Rectangle (0,0,bd.width ,bd.height )

var bmp:Bitmap =new Bitmap (bd)
var bmp2:Bitmap =new Bitmap (bd2)
addChild(bmp)
bmp.y=r*2+10
addChild(bmp2)
bmp2.x=bd.width +100
//2.5D坐标转换----你可以换成更牛逼的真3D坐标转换，有兴趣自己百度

function image25():void 
{
      
        //官方说加上这句有利于效率
        bd2.lock ()
        var px:Number //像素的坐标
        var py:Number 
        var c:uint
        //解析---对原图片的每个像素转换
        for(var i:int=0;i<bd.width ;i++)
        {
                for(var j:int=0;j<bd.height ;j++)
                {
                        c=bd.getPixel32 (i,j)
                        px=i
                        py=j
                        ////下面两句，就是把 矩形变成 45度 平行四边形

                        px=py*0.5+px
                        py*=0.5
                        //z轴高度转换
                        py+=100
                        px+=20
                        
                        py-=(c>>16 & 0xff)*.5-63
                        //px+=(c>>8 & 0xff)*.5-63//取消这句注释，会有惊喜
                        
                        bd2.setPixel32 (px,py,c)
                }
        }
        
        //官方说加上这句有利于效率
        bd2.unlock ()
        
}

var array:Array =[new Point (1,1)]
this.addEventListener ( Event .ENTER_FRAME ,update)
//更新
function update(e:Event ):void 

{
        array[0].x+=1
        array[0].y+=1
        bd.perlinNoise (50,50,1,20,true,true,7,false,array)
        //变换位图，具体请看API
        this.bd2.colorTransform (new Rectangle (0,0,bd2.width ,bd2.height ),new ColorTransform (1,1,1,0.8))
        image25()    //将像素转换成2.5D
}

下载：
无标题-1.fla (4.66 KB, 下载次数: 3)

2018-2-8 14:35 上传

点击文件名下载附件

TKCB：作者又是没有下载文件，至少我来代劳了