React Native Game Engine in React Native Tech Blog Event

Transcript

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

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

   3FBDU
   /BUJWF
   +BQBOͷਓͰ͢

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

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

5. 3FBDU
   /BUJWF
   (BNF
   &OHJOF
   3FBDU
   /BUJWF্ͰήʔϜ։ൃΛ͢ΔͨΊͷίϯ ϙʔωϯτΛఏڙͯ͘͠ΕΔϥΠϒϥϦɻ ಉ࡞ऀʹΑΓ3FBDU
   (BNF
   &OHJOF΋ఏڙ͞Ε͍ͯΔɻ -JHIU
   XFJHIUΛᨳ͓ͬͯΓɺ͔ͳΓܰྔʂʂ ಉۀͩͱ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. )PX
    UP
    VTF
    ͜ͷΑ͏ʹॻ͚ͩ͘Ͱ͜ΕΒͷػೳΛ࢖͏͜ͱ͕Ͱ͖Δɻ

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

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

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

15. FOUJUJFTʹ͸৘ใɻ
    TZTUFNTʹ͸ॲཧɻ
    SFOEFSFSͰ͸ඳࣸɻ )PX
    UP
    VTF
    
    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ʟT
    UIF
    IFMM
    ஫ҙ఺

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

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

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

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

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

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

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

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

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

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

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

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

    Left = POSITION.x - WIDTH/2 Top = POSITION.y - HEIGHT/2

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

    (180/π) ᶃ ᶄ ֯౓ܭࢉͱ͔ߴߍͿΓͩͬͨͷͰ͜Ε ͕ͿͬͪΌ͚೉͔ͬͨ͠স

40. 0TBLBOB
    5PXFS
    #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/ϓϩμΫτͷதͰϛχήʔϜΛ
    ΍Γ͍ͨ৔߹͸ੋඇʂʂ