最強の放置ゲームを作ってる話 ~ と、そのうちのゲーム作るためのゲームデータエディタを作ってる話 ~

Transcript

1. ࠷ڧͷ์ஔήʔϜΛ࡞ͬͯΔ࿩ ~ ͱɺͦͷ͏ͪͷήʔϜ࡞ΔͨΊͷήʔϜσʔλΤσΟλΛ࡞ͬͯΔ࿩ ~ by @kthatoto at ΞϧϛLTձ#4 on 2021/02/25(໦) 21:00~
2. ࣗݾ঺հ • ϋϯυϧωʔϜɿ͸ͱ (kthatoto) • Ruby/Rails, JavaScript/TypeScript, Nuxt/Vue, Go • Twitterɿhttps://twitter.com/kthatoto • GitHubɿhttps://github.com/kthatoto
3. ࠷ڧͷ์ஔήʔϜ ~ಈػ~ • 100%ࣗ෼޷Έͷ์ஔήʔϜ͕͍ͨ͠ • ࣗ෼Ͱ࡞Δ͔͠ͳ͍ • Ұൠతͳ์ஔήʔϜ͸์ஔใुྔ͕1࣍తɺ ͍͍ͤͥ2࣍త • ͡Ό͋Ծʹ3࣍తҎ্ͷใु͕΋Β͑ͨͱͯ͠ɺࣗ෼Ͱ ୡ੒ͨ͠ײ͕͋·Γͳ͍
4. ԣಓ - ์ஔήʔϜͷ์ஔใु 1࣍త 1࣌ؒ͋ͨΓ10Goldੜ੒͞ΕΔήʔϜΛ24࣌ؒ์ஔ = 240Gold 10 × 24 2࣍త 1࣌ؒ͋ͨΓ(10 + x)Goldੜ੒ɺxͷॳظ஋͸0 xͷ஋͸1࣌ؒ͋ͨΓ+1͞ΕΔήʔϜΛ24࣌ؒ์ஔ = 516Gold 10 × 24 + 24 × (24 − 1) 2 ɾɾɾ ɾɾɾ
5. ԣಓ - ์ஔήʔϜͷ์ஔใु 3࣍త 1࣌ؒ͋ͨΓ(10 + x)Goldੜ੒ɺxͷॳظ஋͸0 xͷ஋͸1࣌ؒ͋ͨΓ+y͞ΕΔɺyͷॳظ஋͸0 yͷ஋͸1࣌ؒ͋ͨΓ+1͞ΕΔήʔϜΛ24࣌ؒ์ஔ = 2540Gold 10 × 24 + 24 × (242 − 1) 6 ɾɾɾ ΋ͷʹΑͬͯ͸ୡ੒ײͷͳ͍ ΠϯϑϨͷΑ͏ʹײͯ͡͠·͏
6. ଟ࣍ݩతͳΠϯϑϨΛࣗ෼ͷ ૢ࡞ʹΑͬͯ֫ಘ͢Ε͹
   ୡ੒ײ͕ຯΘ͑Δ ์ஔ͍ͨ͠ʂ VS ࠷ڧͷ์ஔήʔϜ ~ಈػ~
7. ์ஔ͞Ε͍ͯΔ࣌ͷήʔϜͷৼΔ෣͍Λ ࣗ෼ͰϓϩάϥϜͰ͖ΔΑ͏ʹ͢Ε͹ ͍͍Μ͡ΌͶʁ🤔
8. ଟ࣍ݩతͳΠϯϑϨΛࣗ෼ͷ ૢ࡞ʹΑͬͯ֫ಘ͢Ε͹
   ୡ੒ײ͕ຯΘ͑Δ ์ஔ͍ͨ͠ʂ 🤝 ࠷ڧͷ์ஔήʔϜ ~ಈػ~ ϓϩάϥϜΛॻ͍ͯ ์ஔ࣌ͷৼΔ෣͍Λࣗ෼Ͱ ܾఆ͢Δ ॻ͍ͨϓϩάϥϜΛ૸Βͤͯ ์ஔ͢Δ
9. ࠷ڧͷ์ஔήʔϜ ~֓ཁ~ $ game keyup $ game keyleft $ game keydown $ game keyright $ game action $ game cancel γΣϧͱͯ͠ΞΫηεͰ͖ΔΑ͏ʹ͢Ε͹ ΄ͱΜͲͷϓϩάϥϜݴޠ͔ΒΞΫηεՄೳ
10. ࠷ڧͷ์ஔήʔϜ ~֓ཁ~ ήʔϜαʔόʔ ήʔϜ
    σʔλ αʔόʔ ϓϨΠϠʔͷPC ϫʔΧʔ
    ϓϩηε Websocket Connection $ game keyup $ game action $ game keydown ϓϨΠϠʔͷPC ϫʔΧʔ
    ϓϩηε $ game keyleft $ game keyleft $ game action RPC RPC
11. ࠷ڧͷ์ஔήʔϜ ~֓ཁ~ ήʔϜαʔόʔ ήʔϜ
    σʔλ αʔόʔ ϓϨΠϠʔͷPC ϫʔΧʔ
    ϓϩηε Websocket Connection $ game keyup $ game action $ game keydown RPC ϒϥ΢β ෳ਺ͷΩϟϥΫλʔΛಉ࣌ʹ ૢ࡞͢Δ͜ͱ΋Ͱ͖Δ
12. ࠷ڧͷ์ஔήʔϜ ~֓ཁ~ ήʔϜαʔόʔ ήʔϜ
    σʔλ αʔόʔ ϓϨΠϠʔͷPC ϫʔΧʔ
    ϓϩηε Websocket Connection $ game keyup $ game action $ game keydown RPC ϒϥ΢β ήʔϜαʔόʔ
    ήʔϜͷ৺ଁɻΫϥΠΞϯτͱͷ઀ଓ؅ཧɺ ήʔϜϩδοΫॲཧɺΫϥΠΞϯτ͔Βͷཁ ٻʹର͢Δσʔλฦ٫ͳͲΛߦ͏ɻ
    IUUQTHJUIVCDPNLUIBUPUPUFSNXPSMETFSWFS
13. ࠷ڧͷ์ஔήʔϜ ~֓ཁ~ ήʔϜαʔόʔ ήʔϜ
    σʔλ αʔόʔ ϓϨΠϠʔͷPC ϫʔΧʔ
    ϓϩηε Websocket Connection $ game keyup $ game action $ game keydown RPC ϒϥ΢β $-*ΫϥΠΞϯτ
    ϫʔΧʔϓϩηεΛىಈͯ͠ίωΫγϣϯΛ ுΓɺͦΕΛ௨ͯ͠શͯͷૢ࡞Λ࣮ߦ͢Δ͜ ͱ͕Ͱ͖ΔɻϓϩάϥϜΛॻ͍ͯࣗಈԽ͢Δ ͱ͖͸͜ΕΛ࢖͏ɻ
    IUUQTHJUIVCDPNLUIBUPUPUFSNXPSME
14. ࠷ڧͷ์ஔήʔϜ ~֓ཁ~ ήʔϜαʔόʔ ήʔϜ
    σʔλ αʔόʔ ϓϨΠϠʔͷPC ϫʔΧʔ
    ϓϩηε Websocket Connection $ game keyup $ game action $ game keydown RPC ϒϥ΢β ϒϥ΢βΫϥΠΞϯτ
    ී௨ʹήʔϜΛϓϨΠ͢Δ͜ͱ͕Ͱ͖Δɻ
    ະணख
15. ࠷ڧͷ์ஔήʔϜ ~֓ཁ~ ήʔϜαʔόʔ ήʔϜ
    σʔλ αʔόʔ ϓϨΠϠʔͷPC ϫʔΧʔ
    ϓϩηε Websocket Connection $ game keyup $ game action $ game keydown RPC ϒϥ΢β ήʔϜσʔλΤσΟλʔ
    Ϛελʔσʔλͷ࡞੒ɺ؅ཧΛߦ͏ɻ
    31(πΫʔϧΈ͍ͨͳ΋ͷɻࠓ೔ͷओ໾ɻ
    IUUQTHJUIVCDPNLUIBUPUPUXHBNFFEJUPS
16. ήʔϜσʔλΤσΟλʔʹ͍ͭͯ࿩͍ͨ͜͠ͱ • ϑΝΠϧγεςϜΛNuxtͷΈͰૢ࡞͢Δ • Canvas Infinite Scroll ͷ࢓૊Έ • ΦʔϓϯϫʔϧυͷϚοϓσʔλϑΝΠϧͷ෼ׂΛಠࣗ ࣮૷ͯ͠Έͨ (Coming Soon)
17. ϑΝΠϧγεςϜΛNuxtͷΈͰૢ࡞͢Δ • ϚοϓσʔλϑΝΠϧΛ௚઀ϑϩϯτΤϯυͷΈͰ ฤू͍ͨ͠ • ϚοϓσʔλϑΝΠϧ͚ͩͰ΋ɺΦʔϓϯϫʔϧυʹ ͍͔ͨ͠Βෳ਺ϑΝΠϧʹ෼ׂ͢Δ͜ͱʹͳΔ • ϚοϓλΠϧͷը૾σʔλͳͲ΋ѻ͍͍ͨ ϑΝΠϧΛҰׅಡΈࠐΈ͢Δඞཁ͕͋Δ nodeͷ Λ࢖͍͍ͨ fs Ͱ΋ϑΝΠϧॲཧAPIαʔόʔผͰ࡞ΔͷΊΜͲ͍...
18. Nuxt ͷ Server Middleware ࢖ͬͯΈΔ🤔
19. Nuxt Server Middleware ͱ͸ • NuxtʹAPIαʔόʔతͳ͜ͱ΋୲ΘͤΔ • on node Ͱॻ͚Δ fs ͕࢖͑Δʂʂʂʂʂʂʂ fs.mkdir // create directory fs.rmdir // remove directory fs.readdir // list files fs.writeFile // write file fs.readFile // read file fs.unlink // delete file fs.rename // move file/directory
20. ϑΝΠϧγεςϜΛNuxtͷΈͰૢ࡞͢Δ Nuxt Server Frontend GET /images fs.readdir fs.readFile for { } Response List Images
21. const container = document. getElementById('container') container.addEventListener('scroll', () => { const x = container.value.scrollLeft - 25 const y = container.value.scrollTop - 25 const canvas = getElementById('canvas') canvas.style.transform = `translate(${x}px, ${y}px)` }) Canvas (Infinite) Scroll ͷ࢓૊Έ <div id="container"> <div class="large-box"> <canvas id="canvas"/> </div> </div> #container { width: 300px; height: 300px; overflow: scroll; } .large-box { width: 5000px; height: 5000px; } canvas { width: 350px; height: 350px; }
22. Canvas (Infinite) Scroll ͷ࢓૊Έ σϞ on Keynote <div id="container"> <div class="large-box"> <canvas id="canvas"/> </div> </div> https://konvajs.org/docs/sandbox/Canvas_Scrolling.html
23. • ࣮εΫϩʔϧҐஔ࠲ඪͱ Ծ૝εΫϩʔϧҐஔ࠲ඪΛ͓࣋ͬͯ͘ • εΫϩʔϧʹΑΔ࣮εΫϩʔϧҐஔ࠲ඪͷࠩ෼Λ Ծ૝εΫϩʔϧҐஔ࠲ඪʹ΋౰ͯΔ • ࣮εΫϩʔϧҐஔ࠲ඪ͕୺ͬ͜ʹ͖ͨΒɺ ࣮εΫϩʔϧҐஔ࠲ඪΛਅΜதʹ໭ͯ͠ Ծ૝εΫϩʔϧҐஔ࠲ඪ͸มԽͤ͞ͳ͍ • ඳըΛԾ૝εΫϩʔϧҐஔ࠲ඪΛ΋ͱʹߦ͑͹ ແݶεΫϩʔϧͷ׬੒ Canvas Infinite Scroll ͷ࢓૊Έ