React Native Game Engine in React Native Tech Blog Event

6aa82ed11ae69672aca9bff7e25d1044?s=47 @YutamaKotaro
August 05, 2020
240

React Native Game Engine in React Native Tech Blog Event

6aa82ed11ae69672aca9bff7e25d1044?s=128

@YutamaKotaro

August 05, 2020
Tweet

Transcript

  1. 8FMDPNFUP  3FBDU/BUJWF(BNF&OHJOF @YutamaKotaro

  2. 8IPBN* ϢλϚίλϩ΢ ๭ΤΞʔΫϩʔθοτ σʔλαΠΤϯςΟετνʔϜϦʔμʔ 5FDIOJDBM&OHJOFFSJOH5FBNϦʔμʔ ΞϓϦέʔγϣϯ։ൃ σʔλαΠΤϯε Λ΍ͬͯ·͢ʂ ؅ཧ৬ʹͳΓ͗ͯ͢ίʔυॻ͖ͨ͗͢ɾɾɾস ΤϯδχΞ೥໨͘Β͍ͷϛυϧ

    3FBDU/BUJWF+BQBOͷਓͰ͢
  3. 8IZUIJTUIFNF ٱʑʹ-5ൃදͱ͍͏ࣗ༝ͳ৔Λ௖͍ͨͷͰɾɾɾɾ Ͳʔͯ͠΋࢖ͬͯΈ͔ͨͬͨ ͜ͷϥΠϒϥϦΛωλʹͨ͠ʂʂ

  4. 8IZUIJTUIFNF OJUBLJOH΋ήʔϜ΍Δ͍ͬͯͬͯͨ͠ɺ ๻΋ͦͷͭ΋ΓͰ͍ͨΒɺҰࡢ೔͘Β͍ʹ FYQPXFCͱ͍͏ී௨ʹਅ໘໨Ͱ໘ന͍ωλ΍Δݴ͍ग़ͯ͠ ཪ੾ΒΕͨɾɾɾɾɻ ͦ΋ͦ΋๻͸ʹͨ͞Μ͕ͦ͏͍͏͔Β҆৺ͯͨ͠͠ɺྡͰ ͦΕ͍͍ͬ͢Ͷͬͯ࿈ݺͯͨͤ͘͠ʹ͍ͭ΋؊৺ͱɾɾɾ

  5. 3FBDU/BUJWF(BNF&OHJOF 3FBDU/BUJWF্ͰήʔϜ։ൃΛ͢ΔͨΊͷίϯ ϙʔωϯτΛఏڙͯ͘͠ΕΔϥΠϒϥϦɻ ಉ࡞ऀʹΑΓ3FBDU(BNF&OHJOF΋ఏڙ͞Ε͍ͯΔɻ -JHIUXFJHIUΛᨳ͓ͬͯΓɺ͔ͳΓܰྔʂʂ ಉۀͩͱSFBDUHBNFLJU͕༗໊ʂʂ

  6. 3FBDU/BUJWF(BNF&OHJOF ͜Ε࢖͑͹ήʔϜ͕ ɹɹɹ؆୯ʹ࡞ΕΔɾɾɾʂʂʁ

  7. 3FBDU/BUJWF(BNF&OHJOF ʰ͸͍ʱͱݴ͍͍ͨ ͱ͜Ζ͚ͩͲɺ ͦ͏Ͱ΋ͳ͍সɻ

  8. 3FBDU/BUJWF(BNF&OHJOF ૯߹ίʔυྔɹ ɹɹɹ-JOF͘Β͍ʢNJOJGZͳ͠ʣ ͷ΄ΜͱʹܰྔͳϥΠϒϥϦͩͬͨɾɾɾʂʂ ґଘ΋SYKTͷΈɾɾɾɾʂʂ

  9. 3FBDU/BUJWF(BNF&OHJOF Կ͕Ͱ͖Δͷ͔ͱ͍͏ͱʁ

  10. 3FBDU/BUJWF(BNF&OHJOF ɾϧʔϓػೳ ɾλονϋϯυϦϯά ɾϨϯμϦϯάػೳ ओʹ͜ͷࡾͭʂʂ

  11. )PXUPVTF ͜ͷΑ͏ʹॻ͚ͩ͘Ͱ͜ΕΒͷػೳΛ࢖͏͜ͱ͕Ͱ͖Δɻ

  12. ʰTZTUFNTʱͱʰFOUJUJFTʱͱ ʰFOUJUJFTͷSFOEFSFSʱ͕Ίͬ ͪΌॏཁʂʂ )PXUPVTF FOUJUJFTͷ৘ใ΍༷ʑͳ৘ใ͕ TZTUFNTʹొ࿥ͨؔ͠਺ΛྲྀΕ ͍ͯ͘ɻ

  13. TZTUFNTʹొ࿥ͨؔ͠਺ʹ͸ɺ͜ͷΑ ͏ʹॲཧΛ౉͍ͯ͘͠ɻ͜ͷॲཧ͸ఆ ظతʹ࣮ߦ͞ΕΔɻ ·ͨը໘λονͳͲͷΠϕϯτ΋ड͚ औΔ͜ͱ͕Ͱ͖Δɻ )PXUPVTF ͜ͷ࣌ΞϓϦέʔγϣϯͷঢ়ଶΛมߋ ͍ͨ͠ͳΒFOUJUJFTΛߋ৽ͯ͠Ϧλʔϯ ͍ͯ͘͠ɻ

  14. SFOEFSFSʹొ࿥͞Ε͍ͯΔίϯϙʔω ϯτ͸ɺFOUJUZʹొ࿥͞Ε͍ͯΔ৘ใ Λड͚औΕΔɻ )PXUPVTF ͜ͷ৘ใΛड͚औΓͳ͕ΒϨΠΞ΢τ Λมߋ͍ͯ͘͠ɻ ը໘࠲ඪͳͲɾɾɾʂʂ

  15. FOUJUJFTʹ͸৘ใɻ TZTUFNTʹ͸ॲཧɻ SFOEFSFSͰ͸ඳࣸɻ )PXUPVTF 4VNNBSZ TZTUFNTͰFOUJUJFTΛߋ৽ͯ͠ɻ ͦΕΛ΋ͱʹSFOEFSFSʹొ࿥ͨ͠ίϯ ϙʔωϯτΛඳࣸ͢Δɻ systems entities

    <- update renderer ͱͬͯ΋؆୯ʂ
  16. 3FBDU/BUJWF(BNF&OHJOF Ͳ͏ͳ͍ͬͯΔͷ͔஌ΔͨΊ ϥΠϒϥϦͷத਎Λݟ͍ͯ͘ͱ

  17. 3FBDU/BUJWF(BNF&OHJOF ϧʔϓػೳ

  18. -PPQ ήʔϜͰ͸௨ৗͷΞϓϦέʔγϣϯͱҟͳΓΠϕϯτ͸ຖࠁൃੜ ϥΠϒϥϦ಺Ͱ͸DPOTUSVDUPSʹͯɺTVCTDSJCF͍ͯ͠Δɻ DPNQPOFOU%JE.PVOUͰ։࢝͞ΕɺVQEBUF)BOEMFS͕ఆظతʹ࣮ߦ

  19. -PPQ VQEBUF)BOEMFSͰ͸ TZTUFNT͕࣮ߦ͞ΕΔɻ ͜͜Ͱ͸ɺBSHTʹΠϕϯτ֤छ ͕ೖͬͯ͘Δɻ ͜Ε͕TZTZUFNTͰFOUJUJFT΍֤ छΠϕϯτΛड͚औΔ͜ͱ͕Ͱ ͖Δ࢓૊Έɻ

  20. -PPQ Ͳ͏΍ͬͯఆظ࣮ߦ͍ͤͯ͞Δͱ͍͏ͱ %FGBVMU5JNFS͕࣮ମɻ SFBDUHBNFMPPQ΁ͷUIBOLTɻ࣮ࡍʹιʔείʔυ͸΄ͱΜͲҰॹ ͩͬͨʢ΋͔ͯ͠͠ݩʑ͸Ұॹͩͬͨɾɾɾʁʣɻ SFRVFTU"OJNBUJPO'SBNF͕൜ਓͩͬͨʂ

  21. 3FBDU/BUJWF(BNF&OHJOF λονϋϯυϦϯά

  22. 3FBDU/BUJWF(BNF&OHJOF ֤छΠϕϯτ͸ϋϯυϦϯά͞Ε͍ͯΔɻ UPVDI1SPDFTTPSͰTUBSU NPWF FOEͦΕͧΕͷΠϕϯτ໊Ͱॲཧ

  23. 3FBDU/BUJWF(BNF&OHJOF ͦΕͧΕͷΠϕϯτΛॲཧɻ SYKTͰॲཧɻ QSFTTΠϕϯτ΁ͷม׵ॲཧ΍Πϕϯτ ਺ͷ੍ޚΛߦͳ͍ͬͯΔɻ ͜Ε͕Πϕϯτ֤छΛड͚औΔ͜ͱ͕Ͱ ͖Δ࢓૊Έɻ

  24. 3FBDU/BUJWF(BNF&OHJOF ϨϯμϦϯάػೳ

  25. -PPQ SFOEFSFSͰϨϯμϦϯάɻ TDSFFO͸%JNFOTJPOTɺ MBZPVU͸MBZPVU&WFOU SFOEFSFSϓϩύςΟΛϨϯμϦ ϯάɻ ͜Ε͕FOUJUZͷ৘ใ͸શͯड͚ औΔ͜ͱ͕Ͱ͖Δ࢓૊Έɻ

  26. 8IBUʟTUIFIFMM ஫ҙ఺

  27. 8IBUʟTUIFIFMM 3FBDUͬΆ͍ॻ͖ํ͸ ͋Μ·ΓͰ͖ͳ͍

  28. -PPQ ౉͍ͯ͠ΔFOUJUZ͸EJE.PVOU ͰTUBUFߦ͖͕ܾఆ͢ΔͨΊɺ Ұ౓౉ͯ͠͠·͏ͱɺมߋ͕ Ͱ͖ͳ͘ͳΔ ͜ΕΛมߋ͢ΔͨΊʹ͸TXBQ ϝιουΛ֎͔Β࣮ߦͯ͠΍Δ ඞཁ͕͋Δɻ

  29. 3FBDU/BUJWF(BNF&OHJOF ࣮ࡍʹ࡞ͬͯΈͨʂʂ

  30. 3FBDU/BUJWF(BNF&OHJOF ͓͔͞ͳλϫʔότϧ ୊ͯ͠ɾɾɾ

  31. 0TBLBOB5PXFS#BUUMF ๭˔͏˔ͭλϫʔότϧͷ ͺɾɾɾΦϚʔδϡɻ ότϧػೳ͸ະ࣮૷ɻ མͪͯ͘Δ͓ڕ͸ɺ ΢ϛΨϝͱΞΠφϝͱ͓ࢗ਎ɻ ࢗ਎ʹࢸͬͯ͸ಁաը૾͢Βݟ͔ͭΒͳ ͔ͬͨɻ ϑϦʔͷಁաը૾͕ཉ͍͠ɾɾɾɻ ը૾ෆ଍ʹΑΓத్൒୺ͳग़དྷʹɾɾɾ

  32. ่ΕͨΒήʔϜΦʔόʔɻ ճస΋Ͱ͖ΔʢҰԠʣ 0TBLBOB5PXFS#BUUMF

  33. ࡞Γํɻ ෺ཧΤϯδϯ͸NBUUFSKTɻ͜ΕʹΑͬͯ෺ ཧԋࢉΛߦ͏ɻ 0TBLBOB5PXFS#BUUMF ॲཧ͸3FBDU/BUJWF(BNF&OHJOFΛհͯ͠ ߦ͏ɻ NBUUFS͸ύεΛ͍࣋ͬͯΔͷͰɺ $PNQPOFOUͱύεΛϦϯΫͤ͞ͳ͕ΒϨϯ μϦϯά͢Δ͜ͱʹΑͬͯඳࣸ͢Δɻ

  34. 0TBLBOB5PXFS#BUUMF qPPS&OUJUZ চɻJT4UBUJDϓϩύςΟ ʹΑͬͯݻఆ෺ͱͳ Δɻ

  35. 0TBLBOB5PXFS#BUUMF pSTU@pTI&OUJUZ མͱ͢લͷڕɻ͜ͷஈ ֊Ͱ͸.BUUFSͷܭࢉ֎ ʹ͍Δɻ

  36. 0TBLBOB5PXFS#BUUMF pSTU@pTI&OUJUZ ࢦΛ཭ͨ࣌͠ʹʰམ Լʱͤ͞Δɻ ͜ͷ࣌ॳΊͯNBUUFSKT ͷੈքʹ͍ΕɺϦϯΫ ͤ͞Δ͜ͱʹΑͬͯ෺ ཧԋࢉΛ։࢝͢Δɻ ΊͬͪΌΤϥʔग़ͯΔɾɾɾস ͋ͱͰܕ෇͚ɾɾɾɻ

  37. 0TBLBOB5PXFS#BUUMF "JOBNF$PNQPOFOU ࢸͬͯී௨ͷ3FBDU/BUJWFͷίʔυɻ $SFBUF4UZMF4IFFU͍ͯ͠ͳ͍ͷ͸एؾ ͷ͍ͨΓɻ

  38. 0TBLBOB5PXFS#BUUMF "JOBNF$PNQPOFOU ࢸͬͯී௨ͷ3FBDU/BUJWFͷίʔυɻ $SFBUF4UZMF4IFFU͍ͯ͠ͳ͍ͷ͸एؾ ͷ͍ͨΓɻ NBUUFSͰ͸QPTJUJPO͕౉͞ΕΔͷͰͦ ΕΛܭࢉͯ͠ϦϯΫ͍ͤͯ͞Δɻ WIDTH HEIGHT POSITION

    Left = POSITION.x - WIDTH/2 Top = POSITION.y - HEIGHT/2
  39. 0TBLBOB5PXFS#BUUMF "JOBNF$PNQPOFOU ճస͸SPUBUFͰදݱɻ ᶃɺᶄΑΓλϯδΣϯτʹΑΓճస֯ ΛٻΊΔɻ Rotate = Math.atan2(ᶄ, ᶃ) *

    (180/π) ᶃ ᶄ ֯౓ܭࢉͱ͔ߴߍͿΓͩͬͨͷͰ͜Ε ͕ͿͬͪΌ͚೉͔ͬͨ͠স
  40. 0TBLBOB5PXFS#BUUMF མԼ൑ఆ ୺຤ͷߴ͞ΑΓ΋ଟ͘མԼͨ͠৔߹͸ ήʔϜΤϯυɻ HEIGHT < y Y HEIGHT

  41. 3FBDU/BUJWF(BNF&OHJOF ݁࿦

  42. 3FBDU/BUJWF(BNF&OHJOF ɾ΄΅.BUUFSKTήʔ ࢖Θͳͯ͘΋͍͍͚Ͳ΋ ɻ ɾੑ্࣭4UBUF͕࢖͍ʹ͍͘ʢߋ৽͍ͨ͠৔߹͸TXBQϝιουΛ࣮ ߦ͢Δඞཁʣɻ ɾ3FBDU/BUJWF؀ڥͰήʔϜ͕࡞ΕΔ͕ɺSFOEFSFSͰ࢖͏ίϯϙʔω ϯτ͙Β͍͔͠3FBDU/BUJWFͷ஌͕ࣝඞཁͳͱ͜Ζ͸ͳ͍ɻ ϧʔϓػೳΛఏڙͯ͘͠ΕΔίϯϙʔωϯτɻ ήʔϜ࡞ΔͳΒBTTFU΋ఏڙ͞Ε͍ͯΔ˔OJUZʹ܉ഋ্͕͕Δɻ

    ΠϯλϥΫςΟϒͳΞχϝʔγϣϯʹ࢖͏৔߹ʹ͸͋Γ͔΋ɻ
  43. 3FBDU/BUJWF(BNF&OHJOF 3/ϓϩμΫτͷதͰϛχήʔϜΛ ΍Γ͍ͨ৔߹͸ੋඇʂʂ