React Native Game Engine in React Native Tech Blog Event

Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

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

Slide 22

Slide 22 text

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

Slide 23

Slide 23 text

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

Slide 24

Slide 24 text

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

Slide 25

Slide 25 text

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

Slide 26

Slide 26 text

8IBUʟTUIFIFMM ஫ҙ఺

Slide 27

Slide 27 text

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

Slide 28

Slide 28 text

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

Slide 29

Slide 29 text

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

Slide 30

Slide 30 text

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

Slide 31

Slide 31 text

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

Slide 32

Slide 32 text

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

Slide 33

Slide 33 text

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

Slide 34

Slide 34 text

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

Slide 35

Slide 35 text

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

Slide 36

Slide 36 text

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

Slide 37

Slide 37 text

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

Slide 38

Slide 38 text

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

Slide 39

Slide 39 text

0TBLBOB5PXFS#BUUMF "JOBNF$PNQPOFOU ճస͸SPUBUFͰදݱɻ ᶃɺᶄΑΓλϯδΣϯτʹΑΓճస֯ ΛٻΊΔɻ Rotate = Math.atan2(ᶄ, ᶃ) * (180/π) ᶃ ᶄ ֯౓ܭࢉͱ͔ߴߍͿΓͩͬͨͷͰ͜Ε ͕ͿͬͪΌ͚೉͔ͬͨ͠স

Slide 40

Slide 40 text

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

Slide 41

Slide 41 text

3FBDU/BUJWF(BNF&OHJOF ݁࿦

Slide 42

Slide 42 text

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

Slide 43

Slide 43 text

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