さぁTilemapを始めよう!

 さぁTilemapを始めよう!

2018/01/31に開催された#Gotauni No.4の@RyotaMurhoshiの発表資料です

F46c97bb74758d481531990654933050?s=128

RyotaMurohoshi

January 31, 2018
Tweet

Transcript

  1. ̵ͫ͗TilemapΨতΗΞ͜Ѻ by @RyotaMurohoshi 2018/01/31(࿜) Gotanda.unity #4

  2. Asset Store΁ͩΩ΀ίψϐϕ͘͢ΠΔͯ

  3. None
  4. None
  5. None
  6. None
  7. όαϸ΄ኮ؟ίψϐϕѺ

  8. ෯ᇇ΄Asset Store΁΅ ϓμφώϰѿϫϓϷίϸ > 2DόαϸϫϐϤ ͹ͼθϓρϷΘ͘ΠΔͭ͵Ѻ h"ps:/ /www.assetstore.unity3d.com/jp/?stay#!/search/page=1/sortby=popularity/query=category:140

  9. Ꭵ୵ኮ؟(όαϸ)Ψ෇ͣ払Η͵ϫϐϤ όαϸϫϐϤ ͚ΣΩ΀οЄϭͽֵΥ΢ͼ͚Δͯ

  10. Ϥ϶ϐϕϢζЄϭοЄϭ

  11. 䜐ኼτϬϲϹЄτϴЀοЄϭ

  12. ϺЄν϶αμοЄϭ

  13. ͳͭͼ ϺЄϸϤϹαЀνοЄϭ

  14. զڹ΄Unityͽ΅ͩ΄Ξ͜΀οЄϭݻͧ΁ όαϸϫϐϤΨ֢Ρ΄΅ಋ樌͢͡͡ΠΔͭ͵

  15. • ֜㮆Θ֜㮆ΘSpriteRendererΨᯈᗝͯΡ • όαϸϫϐϤ΄AssetΨAsset Storeͽ揮͹ͼ̵ֵ͚ොΨ憝͞Ρ • όαϸϫϐϤτφϓϭΨᛔ֢ͭͼϮЀϓϗЀφͯΡ

  16. Unity 2017.2ͽTilemap͢䌙فͫ΢ όαϸϫϐϤΨֵ͹͵οЄϭ͢ ;ͼΘ֢ΠΚͯͥ΀ΠΔͭ͵

  17. Ք෭΅ϔϯΨԻ͞ͺͺ̵ ̵̿ͫ͗TilemapΨতΗΞ͜Ѻ̀;氂ͭͼ Tilemap΄च๜䯤౮ᥝᔰ;ֵ͚ොΨ奧ՕͭΔͯ

  18. Ք෭΄ρЄϸ ̿Tilemapֵ͚তΗ΄݇ᘍ΁΀͹͵Ѻ̀ ͹ͼ௏͹ͼΘΟ͜

  19. ᛔ૩奧Օ

  20. @RyotaMurohoshi

  21. 㮆Ո᪁ޱ樄咲ᘏͽͯѺ ͩΩ΀οЄϭΨ֢͹ͼ͚ΔͯѺ

  22. None
  23. None
  24. None
  25. ෭๜Android΄տ Unity᮱ͽͩΩ΀ͩ;Κ͹ͼΔͯ • UniBook6 Hello Programmable Tile! • UniBook8 TilemapConverterͽ਍ΌTilemap΄πЄϖ

    • ଙ๛LT2016 TileMapEditor΅͚͚ʹѺ Θ͜ݘͥ΀͹͵ΩͽΌ͹ͷΙͧ抎Δ΀ͥͼ͚͚ͽͯѺ
  26. Ք෭֢ΡΘ΄Ѻ

  27. ϔϯ : 奧Օ

  28. ๜氂

  29. UnityϝЄυϴЀ • Tilemap΅Unity 2017.2ͽ䌙ف • ͵Ͷ奞͚͡ද࠺独ץྋͫ͢΢ͼ͚Ρ΄ͽ̵๋ෛUnityവ䅏

  30. Tilemap΅͚ͥͺ͡΄䯤౮ᥝᔰΨ奲ΕݳΥͱͼֵ͜ 1. Sprite(ኮ؟) 2. Tileίψϐϕ 3. Tile Pallete 4. Tile樛昧οЄϭηϣυδμϕ

  31. Tilemap΄䯤౮ᥝᔰ΄奧Օ ΅ͮΔΠ

  32. ᥝᔰ1 Sprite(ኮ؟) • Tilemap΄1ψϸ(๋ੜ΄Ꭵ୵毎ऒ)΁ᤒᐏͯΡኮ؟ίψϐϕ • ͚ͥͺ͡戔ਧΨͯΡ஠ᥝ͘͢Π • ஠ᥝͶ͹͵Οړۆ • Pixel

    Per Unit • Collider
  33. ᥝᔰ2 Tileίψϐϕ • Tileμ϶φ΄ίψϐϕ(ScriptableObject) • SpriteΨ݇ᆙͭ͵Π̵ᜋ΄ఘ䁭Ψכ೮ͭ͵ΠͯΡ • Tilemapͽ΅ͩ΄TileίψϐϕΨTilemapӾ΄ψϸ΁ᯈᗝ • Tileμ϶φ΄憭μ϶φ΅TileBaseμ϶φ

    • TileBaseμ϶φΨ姅ಥͭ͵μ϶φΨ֢Π̵͚Σ͚ΣͽͣΡ
  34. ΀ΩͽTileAsset?ϮϷϐϕ΅Ҙ ψϸ΁΅Spriteͽ΅΀ͥTileΨᗝͥ ͘Ρኮ؟Ψ૧๊ͭ͞͵͚;ͣ΁̵ Tile΄݇ᆙͯΡSpriteΨ૧๊ͭ͞ΡͶͧͽOKѺ

  35. ᥝᔰ3 TilePallete • TileίψϐϕΨጭ梍ͯΡϞϹϐϕ • τЄЀӤ΁TilePallete΁ጭ梍ͭ͵TileίψϐϕΨ晝䝑ͭᯈᗝͯΡ • Ꭵ୵ൈኮ̵晝䝑̵ڷᴻ̵䂍ΠͺΌͭ΀Ϳ΄ϯЄϖ晝䝑Θ • ϤϺυδμϕٖ΁΅Tilemap΄ϤϹϢήϣ;ͭͼכਂͫ΢Ρ

    • Tile Pallete Windowͽ䜷͜
  36. ᥝᔰ4 Tile樛昧οЄϭηϣυδμϕ • ͩͩΔͽ奧Օͭ͵Κͺ΅ίψϐϕͽτЄЀӤ΁΅ᗝ͡΀͚ • τЄЀӤ΁΅ེ΄ԫͺΨ֢౮ • GridοЄϭηϣυδμϕ • TilemapοЄϭηϣυδμϕ

  37. Tilemap΅͚ͥͺ͡΄䯤౮ᥝᔰΨ奲ΕݳΥͱͼֵ͜ 1. Sprite(ኮ؟) 2. Tileίψϐϕ 3. Tile Pallete 4. Tile樛昧οЄϭηϣυδμϕ

  38. Tilemap΄䯤౮ᥝᔰ΄奧Օ ͠ΥΠ

  39. ͩͩ͡Ο΅ϔϯΨԻ͞ͺͺ Κ͹ͼ͚ͣΔͯѺ

  40. ͩͩ͡Οच๜ጱ΀Tilemap΄ֵ͚ො ΅ͮΔΠ

  41. 1: Sprite΄ӥ伛㯪

  42. 1: Sprite΄ӥ伛㯪 (1) ϪαЀϕ΅ • 1䶅΄ኮ؟΁愢හ΄Sprite͘͢΢Άړۆ • Pixels Per UnitΨ晒ڔ΁

    • ColliderΨ抠ෆ
  43. ϔϯ

  44. Pixels Per Unit • Sprite͢τЄЀͽൈኮͫ΢͵檭΄य़ͣͫΨ抠ෆͯΡ • UnityӤͽ΄槱ͫ1΁ፘ୮ͯΡϡμψϸහ • 1旽͢32ϡμψϸ΄ኮ؟͘͢͹͵;ͭͼ̵ •

    Pixels Per Unit͢32 : य़ͣͫ΅1 • Pixels Per Unit͢16 : य़ͣͫ΅2 • ྋො୵΄ኮ؟΀Ο1旽΄ϡμψϸහΨPixels Per Unit΁
  45. Sprite Editor΄Edit Physics Shape Sprite΄Collider΄εϐυΨ抠℄Ѻ Tilemapͽ΄ള᥶ڣਧ͚͚͢ఽͮ΁Ѻ h"ps:/ /qiita.com/RyotaMurohoshi/items/a4944ba2f4fd7c00e8ec

  46. None
  47. Step 2

  48. 2 : TilePallete΄֢౮

  49. ϔϯ

  50. 2 : TilePallete΄֢౮ 1. ϮϘϲЄ΄ Window > Tile PalleteΨ晝䝑 2.

    Tile Pallete Window΄ૢӤ΄̿Create New Pale5èΨೀӥ 3. Name΁ϞϹϐϕݷΨفێͭCreateϩόЀΨೀͯ
  51. Step 3

  52. 3 : TileAsset΄֢౮

  53. 3 : TileAsset΄֢౮ Tilepallete΁spriteΨϖ϶ϐν&ϖϺϐϤͽ Tileίψϐϕ֢౮&TileίψϐϕΨPallete΁ጭ梍Ѻ

  54. Step 4

  55. 4 : οЄϭηϣυδμϕ΄֢౮

  56. 4 : οЄϭηϣυδμϕ΄֢౮ Create > 2D Object > Tilemapͽ GridοЄϭηϣυδμϕ;

    TilemapοЄϭηϣυδμϕ͢Ѻ
  57. ϔϯ

  58. ͳ΢ʹ΢΄πЀϪЄϕ΄抍ก

  59. GridπЀϪЄϚЀϕ • Cell Size : ψϸ΄य़ͣͫ • Cell Gap :

    ψϸ;ψϸ΄ᵐ樌΄य़ͣͫ • Cell Swizzle : Tilemap΄ଘᶎҁϔϢζϸϕ΅XYଘᶎ) ͩ΄戔ਧ΅̵ͯΏͼ΄ৼTilemapοЄϭηϣυδμϕ΁䌏ͭͼ晒䖕
  60. TilemapRendererπЀϪЄϚЀϕ ൈኮ戔ਧΨݪΠSpriteRenderer;و᭗΄殻ፓΨ೮ͺ • Sor%ng Layer • Order In Layer •

    Mask Interac%on ᙧวϹαϱЄ独ڹᶎϹαϱЄͳͭͼκϰ϶μόЄҁSpriteRenderer҂Ε͵͚΁ൈኮ殼ଧΨګகͽͣΡ
  61. TilemapπЀϪЄϚЀϕ Ϳͩ΁Ϳ΄Tile͘͢Ρ΄͡΄ఘ䁭Ψ೮ͺ ᜋΚίЀθЄ΀Ϳ΄ൈኮ独ᯈᗝ΁樛ͯΡ戔ਧ殻ፓΘ

  62. Step 5

  63. 5 : Tilemap΄ൈኮ

  64. ϔϯ

  65. 5 : Tilemap΄ൈኮ1 • Ac$ve Tilemap͢䌏᨝Tilemap΁΀͹ͼ͚Ρ͡嘦扯 • ϣ϶τίαπЀΨ晝䝑 • ൈኮͭ͵͚όαϸΨ晝䝑

  66. 5 : Tilemap΄ൈኮ2 Scene Windowͽ ൈኮͭ͵͚䁰ಅ΁θЄϊϸΨ㵕ͭ͡ૢμϷϐμ ׎ڥ΀䱛ᚆΚτϴЄϕθϐϕΨ洑ֵͭͼιЀιЀϫϐϤΨ֢Σ͜Ѻ

  67. τϴЄϕθϐϕ1 • s : 塅㾨晝䝑 • m : 塅㾨晝䝑ͭ͵᮱ړΨᑏ㵕 •

    b : 晝䝑Ӿ΄όαϸͽൈኮ • u : Ꭵ୵䂍ΠͺΌͭ • g : 毎ऒ䂍ΠͺΌͭ • shi+ / d : ڷᴻ
  68. τϴЄϕθϐϕ2 • Ctrl(Wim) / Cmd(Mac) Θͭͥ΅ i : φϪαϕ毎ऒ晝䝑 •

    . (Win) / } (Mac) 䦒懯ࢧΠ90ଶࢧ敢 • , (Win) / { (Mac) ݍ䦒懯ࢧΠ90ଶࢧ敢 • Shi; + . (Win) / Shi; + } (Mac) ࣮ፗොݻݍ敢 • Shi; + , (Win) / Shi; + { (Mac) ࿜ଘොݻݍ敢
  69. Step 6

  70. Step 6 : Collider΄戔ਧ • TilemapCollider΄՞Ө • CompositeCollider΄՞Ө • TilemapCollider΄Used

    By CompositeΨON Sprite΄Physics Shape΄戔ਧͩͩ͢ͽኞͣΡѺ
  71. ͩͩΔͽͽच๜ጱ΀Tilemap΄ֵ͚ො 奰ΥΠ

  72. ͚ͥͺ͡愆᪃抍ก

  73. 戔ਧΨૡॢͯ΢Ά̵Isometric΀TilemapΘ֢΢ΡѺ

  74. None
  75. ϔϯ

  76. • Grid • Cell Size : 0.75 • Scale :

    0.5 • Tilemap • Transform Rota<on : 45 • Tilemap Rota<on : 315 • Tilemap Scale Y : 2 • Sort Order : Top Right
  77. TilemapοЄϭηϣυδμϕ΅愢හ̵ϹαϱЄΨ֢ΡѺ

  78. ϔϯ

  79. ͚ͥͺ͡愆᪃抍ก ͠ΥΠ

  80. Θ͹;䮭΁TilemapΨ֢Σ͜Ѻ ͯͯ͠Η϶αϣ϶Ϸ

  81. 2d-extras

  82. 2d-extras • Unityلୗ϶αϣ϶Ϸ • GitHub΄Unity-Technologies/2d-extras΁ • 2D͹ͼݷڹͶͧͿΔͶTileͭ͡΀͚ΞѺ • ͘Ρᑕଶ౮ᆧͭ͵Ο̵ίψϐϕφϕί΁ᤈͥΟ͚ͭ h"ps:/

    /github.com/Unity-Technologies/2d-extras
  83. 2d-extras΄Ӿ΄μ϶φᗭ᩻͢䔶ێѺ ͚ͥͺ͡奧ՕѺ

  84. TerrainTile

  85. ϔϯ

  86. ͩ΢ཿͭͥ΀͚ͽͯ͡Ѻ

  87. ֢ΠොѺ

  88. TerrainTile΄惾㯎 • ScriptableTile΄1圵 • TerrainTile΅TileBaseΨ姅ಥͭ͵μ϶φ • 15圵΄SpriteΨጭ梍ͯΡ • ޮ㾨΄Tile΄ᇫ丆΁ݳΥͱͼ͚͚ఽͮ΁SpriteΨᤒᐏ •

    ᇫ丆΁ݳΥͱͼSprite圵气晝䝑 • ᇫ丆΁ݳΥͱͼSpriteΨࢧ敢
  89. TerrainTile΄惾㯎 15圵΄Sprite΅ྋͭͥ戔ਧͭ΀͚;͚ͧ΀͚ 托ͭͥ΅ӥΨ h"ps:/ /qiita.com/RyotaMurohoshi/items/1629c50a9d9f70f31c83

  90. ColorSmoothBrush

  91. ColorSmoothBrush΄ֵ͚ො 1. TintedTilemapτδЄύЄͽMaterialΨ֢౮ 2. ↑ΨTilemap΁՞Ө 3. BrushΨTintedBrush΁ͭͼ̵ᜋΨ戔ਧ 4. Scene WindowͽᜋΨ䂍Π͵͚䁰ಅΨμϷϐμ

  92. ՜΁Θ׎ڥ΀Brush • LineBrush : 娄Ψ୚ͧΡΚͺ • Cordina1eBrush : θЄϊϸ͘͢Ρ;ͩΣ΄ଷ䰤͢Υ͡ΡΚͺ •

    PrefabBrush : ೰ਧͭ͵ϤϹϢήϣΨψϸ΁ᯈᗝͽͣΡΚͺ
  93. 2d-extras Tilemapֵ͜΀ΟΆ ΕΩ΀ֵ͹ͼ͚ͣΔͭΝ͜Ѻ

  94. Tilemap̵ֵ͚͵ͥ΀ΠΔͭ͵͡Ѻ ΀Ω;΀ֵ͚ͥতΗΟ΢Ρ䶲ͭ͢ͼͣΔͭ͵͡Ѻ

  95. ̵ͫ͗TilemapΨতΗΞ͜Ѻ by @RyotaMurohoshi 2018/01/31(࿜) Gotanda.unity #4