Upgrade to Pro — share decks privately, control downloads, hide ads and more …

React Native Game Engine in React Native Tech Blog Event

@YutamaKotaro
August 05, 2020
1.2k

React Native Game Engine in React Native Tech Blog Event

@YutamaKotaro

August 05, 2020
Tweet

Transcript

  1. 8FMDPNFUP

    3FBDU/BUJWF(BNF&OHJOF
    @YutamaKotaro

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  26. 8IBUʟTUIFIFMM
    ஫ҙ఺

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  39. 0TBLBOB5PXFS#BUUMF
    "JOBNF$PNQPOFOU
    ճస͸SPUBUFͰදݱɻ
    ᶃɺᶄΑΓλϯδΣϯτʹΑΓճస֯
    ΛٻΊΔɻ
    Rotate = Math.atan2(ᶄ, ᶃ) * (180/π)


    ֯౓ܭࢉͱ͔ߴߍͿΓͩͬͨͷͰ͜Ε
    ͕ͿͬͪΌ͚೉͔ͬͨ͠স

    View Slide

  40. 0TBLBOB5PXFS#BUUMF
    མԼ൑ఆ
    ୺຤ͷߴ͞ΑΓ΋ଟ͘མԼͨ͠৔߹͸
    ήʔϜΤϯυɻ
    HEIGHT < y
    Y
    HEIGHT

    View Slide

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

    View Slide

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

    View Slide

  43. 3FBDU/BUJWF(BNF&OHJOF
    3/ϓϩμΫτͷதͰϛχήʔϜΛ
    ΍Γ͍ͨ৔߹͸ੋඇʂʂ

    View Slide