[Flash开发者交流][2010.03.28]isometric位图引擎技巧(史珉)

1,554 views

Published on

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
1,554
On SlideShare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
17
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

[Flash开发者交流][2010.03.28]isometric位图引擎技巧(史珉)

  1. 1. Isometric 位图引擎技巧 Aspirin @ Slide
  2. 2. 投影法则 ● 统称轴测法( Axonometric ) ● Isometric ( 模拟城市,模拟人生 1/2 ,星际争霸 ...) ● Dimetric ( 植物大战僵尸,英雄无敌 )
  3. 3. 投影的特点 ● 没有消失点 ● 3D 中平行的线,投影后仍然平行 ● 物体离观察点的远近不影响其在画面上的大小 ● 一种对 3D 世界描述的简化
  4. 4. Isometric 的三种视角 ( 1 ) ● The 30° isometric projection
  5. 5. Isometric 的三种视角( 2 ) ● The 1:2 isometric projection
  6. 6. Isometric 的三种视角( 3 ) ● The "military" projection
  7. 7. Dimetric ● 和 Isometric 的区别 在 Isometric 中, x/y/z 轴的单位一样 即如果一个立方体被投影到 2D 画面中,所有边 的长度是一样的。
  8. 8. Dimetric ● 和 Isometric 的区别 在 Dimetric 投影中其中的一个轴(往往是 z 轴会 被缩放)。
  9. 9. Isometric 投影 public static function spaceToScreen(x : Number, y : Number, z : Number) : Point { var screenX : Number = x - z; var screenY : Number = y * Y_CORRECT + (x + z) * .5; return new Point(screenX, screenY); }
  10. 10. 3D 投影 public function calScreenPosition( n : Number3D, vanishingVertex : Number3D, centerVertex : Number3D, focus : Number ) : void { var scale : Number = focus/(focus + n.z + centerVertex.z); var x : Number = vanishingVertex.x + (centerVertex.x + n.x)*scale; var y : Number = vanishingVertex.y + (centerVertex.y + n.y)*scale; screenX = x; screenY = y; }
  11. 11. NodeTree 结构 ● DisplayObject Node Add Child Remove Child Set Child Depth Get Child Number Event Bubbling
  12. 12. NodeTree 的应用 ● 人物身上的状态条 ● 物品所处位置的地板高亮 ● 增加特效 ● 进入,退出房屋 / 移动平台
  13. 13. 地图网格 ● 碰撞检测计算 ● 寻路 ● 安放物品 ● 提示:创建一个 GridNode 类管理吸附在网格上 的显示对象
  14. 14. 位图渲染 ● 将 MovieClip 转换成位图 1) 序列 2) ScrollRect ● 使用迭代,遍历 NodeTree 上的显示对象,并把 它渲染后的位图拷贝到同一张画布上
  15. 15. 一些技巧 ● MovieClip2BitmapData 的异步渲染 ● 对象池 ● 不同大小动物的寻径 ● 遮挡和排序 ● 如何分割显示层

×