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