Isometric 位图引擎技巧 Aspirin @ Slide
投影法则 <ul><li>统称轴测法( Axonometric  )
Isometric
( 模拟城市,模拟人生 1/2 ,星际争霸 ...)
Dimetric
( 植物大战僵尸,英雄无敌 ) </li></ul>
投影的特点 <ul><li>没有消失点
3D 中平行的线,投影后仍然平行
物体离观察点的远近不影响其在画面上的大小
一种对 3D 世界描述的简化 </li></ul>
Iso与3D投影对比图
Isometric 的三种视角 ( 1 ) <ul><li>The 30° isometric projection </li></ul>
Isometric 的三种视角( 2 ) <ul><li>The 1:2 isometric projection </li></ul>
Isometric 的三种视角( 3 ) <ul><li>The &quot;military&quot; projection  </li></ul>
Dimetric <ul><li>和 Isometric 的区别
在 Isometric 中, x/y/z 轴的单位一样
Upcoming SlideShare
Loading in …5
×

Isometric位图引擎技巧 史珉

2,708 views

Published on

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
2,708
On SlideShare
0
From Embeds
0
Number of Embeds
163
Actions
Shares
0
Downloads
67
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Isometric位图引擎技巧 史珉

  1. 1. Isometric 位图引擎技巧 Aspirin @ Slide
  2. 2. 投影法则 <ul><li>统称轴测法( Axonometric )
  3. 3. Isometric
  4. 4. ( 模拟城市,模拟人生 1/2 ,星际争霸 ...)
  5. 5. Dimetric
  6. 6. ( 植物大战僵尸,英雄无敌 ) </li></ul>
  7. 7. 投影的特点 <ul><li>没有消失点
  8. 8. 3D 中平行的线,投影后仍然平行
  9. 9. 物体离观察点的远近不影响其在画面上的大小
  10. 10. 一种对 3D 世界描述的简化 </li></ul>
  11. 11. Iso与3D投影对比图
  12. 12. Isometric 的三种视角 ( 1 ) <ul><li>The 30° isometric projection </li></ul>
  13. 13. Isometric 的三种视角( 2 ) <ul><li>The 1:2 isometric projection </li></ul>
  14. 14. Isometric 的三种视角( 3 ) <ul><li>The &quot;military&quot; projection </li></ul>
  15. 15. Dimetric <ul><li>和 Isometric 的区别
  16. 16. 在 Isometric 中, x/y/z 轴的单位一样
  17. 17. 即如果一个立方体被投影到 2D 画面中,所有边的长度是一样的。 </li></ul>
  18. 18. Dimetric <ul><li>和 Isometric 的区别
  19. 19. 在 Dimetric 投影中其中的一个轴(往往是 z 轴会被缩放)。 </li></ul>
  20. 20. Isometric 投影 <ul>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); } </ul>
  21. 21. 3D 投影 <ul>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; } </ul>
  22. 22. NodeTree 结构 <ul><li>DisplayObject Node
  23. 23. Add Child
  24. 24. Remove Child
  25. 25. Set Child Depth
  26. 26. Get Child Number
  27. 27. Event Bubbling </li></ul>
  28. 28. NodeTree的应用 <ul><li>人物身上的状态条
  29. 29. 物品所处位置的地板高亮
  30. 30. 增加特效
  31. 31. 进入,退出房屋/移动平台 </li></ul>
  32. 32. 地图网格 <ul><li>碰撞检测计算
  33. 33. 寻路
  34. 34. 安放物品
  35. 35. 提示:创建一个 GridNode 类管理吸附在网格上的显示对象 </li></ul>
  36. 36. 位图渲染 <ul><li>将 MovieClip 转换成位图
  37. 37. 1) 序列
  38. 38. 2) ScrollRect
  39. 39. 使用迭代,遍历 NodeTree 上的显示对象,并把它渲染后的位图拷贝到同一张画布上 </li></ul>
  40. 40. 一些技巧 <ul><li>MovieClip2BitmapData的异步渲染
  41. 41. 对象池
  42. 42. 不同大小动物的寻径
  43. 43. 遮挡和排序
  44. 44. 如何分割显示层 </li></ul>

×