React Native Game Engine in React Native Tech Blog Event

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