$30 off During Our Annual Pro Sale. View Details »
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
React Native Game Engine in React Native Tech B...
Search
@YutamaKotaro
August 05, 2020
1
1.9k
React Native Game Engine in React Native Tech Blog Event
@YutamaKotaro
August 05, 2020
Tweet
Share
More Decks by @YutamaKotaro
See All by @YutamaKotaro
0->1 現場におけるReactNative
yutamakotaro
0
240
ライブラリはしご酒
yutamakotaro
0
180
React + Valtio
yutamakotaro
0
120
My experience for 3 years with React Native
yutamakotaro
0
61
React Nativeと共に歩んだ3年間【TECH STAND #3】
yutamakotaro
1
1.4k
React Native Book
yutamakotaro
0
71
AWS Summit2019 airCloset section
yutamakotaro
1
220
フルJSアーキテクトで作るエアークローゼット
yutamakotaro
2
600
タイタニック ロジスティック回帰
yutamakotaro
0
180
Featured
See All Featured
Bash Introduction
62gerente
615
210k
Why You Should Never Use an ORM
jnunemaker
PRO
61
9.6k
Build your cross-platform service in a week with App Engine
jlugia
234
18k
Context Engineering - Making Every Token Count
addyosmani
9
490
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
25
1.6k
Docker and Python
trallard
47
3.7k
Fireside Chat
paigeccino
41
3.7k
4 Signs Your Business is Dying
shpigford
186
22k
Become a Pro
speakerdeck
PRO
31
5.7k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
47
7.8k
Code Reviewing Like a Champion
maltzj
527
40k
Optimising Largest Contentful Paint
csswizardry
37
3.5k
Transcript
8FMDPNFUP 3FBDU/BUJWF(BNF&OHJOF @YutamaKotaro
8IPBN* ϢλϚίλϩ ΤΞʔΫϩʔθοτ σʔλαΠΤϯςΟετνʔϜϦʔμʔ 5FDIOJDBM&OHJOFFSJOH5FBNϦʔμʔ ΞϓϦέʔγϣϯ։ൃ σʔλαΠΤϯε Λͬͯ·͢ʂ ཧ৬ʹͳΓ͗ͯ͢ίʔυॻ͖ͨ͗͢ɾɾɾস ΤϯδχΞ͘Β͍ͷϛυϧ
3FBDU/BUJWF+BQBOͷਓͰ͢
8IZUIJTUIFNF ٱʑʹ-5ൃදͱ͍͏ࣗ༝ͳΛ͍ͨͷͰɾɾɾɾ Ͳʔͯͬͯ͠Έ͔ͨͬͨ ͜ͷϥΠϒϥϦΛωλʹͨ͠ʂʂ
8IZUIJTUIFNF OJUBLJOHήʔϜΔ͍ͬͯͬͯͨ͠ɺ ͦͷͭΓͰ͍ͨΒɺҰࡢ͘Β͍ʹ FYQPXFCͱ͍͏ී௨ʹਅ໘Ͱ໘ന͍ωλΔݴ͍ग़ͯ͠ ཪΒΕͨɾɾɾɾɻ ͦͦʹͨ͞Μ͕ͦ͏͍͏͔Β҆৺ͯͨ͠͠ɺྡͰ ͦΕ͍͍ͬ͢Ͷͬͯ࿈ݺͯͨͤ͘͠ʹ͍ͭ؊৺ͱɾɾɾ
3FBDU/BUJWF(BNF&OHJOF 3FBDU/BUJWF্ͰήʔϜ։ൃΛ͢ΔͨΊͷίϯ ϙʔωϯτΛఏڙͯ͘͠ΕΔϥΠϒϥϦɻ ಉ࡞ऀʹΑΓ3FBDU(BNF&OHJOFఏڙ͞Ε͍ͯΔɻ -JHIUXFJHIUΛᨳ͓ͬͯΓɺ͔ͳΓܰྔʂʂ ಉۀͩͱSFBDUHBNFLJU͕༗໊ʂʂ
3FBDU/BUJWF(BNF&OHJOF ͜Ε͑ήʔϜ͕ ɹɹɹ؆୯ʹ࡞ΕΔɾɾɾʂʂʁ
3FBDU/BUJWF(BNF&OHJOF ʰ͍ʱͱݴ͍͍ͨ ͱ͜Ζ͚ͩͲɺ ͦ͏Ͱͳ͍সɻ
3FBDU/BUJWF(BNF&OHJOF ૯߹ίʔυྔɹ ɹɹɹ-JOF͘Β͍ʢNJOJGZͳ͠ʣ ͷ΄ΜͱʹܰྔͳϥΠϒϥϦͩͬͨɾɾɾʂʂ ґଘSYKTͷΈɾɾɾɾʂʂ
3FBDU/BUJWF(BNF&OHJOF Կ͕Ͱ͖Δͷ͔ͱ͍͏ͱʁ
3FBDU/BUJWF(BNF&OHJOF ɾϧʔϓػೳ ɾλονϋϯυϦϯά ɾϨϯμϦϯάػೳ ओʹ͜ͷࡾͭʂʂ
)PXUPVTF ͜ͷΑ͏ʹॻ͚ͩ͘Ͱ͜ΕΒͷػೳΛ͏͜ͱ͕Ͱ͖Δɻ
ʰTZTUFNTʱͱʰFOUJUJFTʱͱ ʰFOUJUJFTͷSFOEFSFSʱ͕Ίͬ ͪΌॏཁʂʂ )PXUPVTF FOUJUJFTͷใ༷ʑͳใ͕ TZTUFNTʹొͨؔ͠ΛྲྀΕ ͍ͯ͘ɻ
TZTUFNTʹొͨؔ͠ʹɺ͜ͷΑ ͏ʹॲཧΛ͍ͯ͘͠ɻ͜ͷॲཧఆ ظతʹ࣮ߦ͞ΕΔɻ ·ͨը໘λονͳͲͷΠϕϯτड͚ औΔ͜ͱ͕Ͱ͖Δɻ )PXUPVTF ͜ͷ࣌ΞϓϦέʔγϣϯͷঢ়ଶΛมߋ ͍ͨ͠ͳΒFOUJUJFTΛߋ৽ͯ͠Ϧλʔϯ ͍ͯ͘͠ɻ
SFOEFSFSʹొ͞Ε͍ͯΔίϯϙʔω ϯτɺFOUJUZʹొ͞Ε͍ͯΔใ Λड͚औΕΔɻ )PXUPVTF ͜ͷใΛड͚औΓͳ͕ΒϨΠΞτ Λมߋ͍ͯ͘͠ɻ ը໘࠲ඪͳͲɾɾɾʂʂ
FOUJUJFTʹใɻ TZTUFNTʹॲཧɻ SFOEFSFSͰඳࣸɻ )PXUPVTF 4VNNBSZ TZTUFNTͰFOUJUJFTΛߋ৽ͯ͠ɻ ͦΕΛͱʹSFOEFSFSʹొͨ͠ίϯ ϙʔωϯτΛඳࣸ͢Δɻ systems entities
<- update renderer ͱͬͯ؆୯ʂ
3FBDU/BUJWF(BNF&OHJOF Ͳ͏ͳ͍ͬͯΔͷ͔ΔͨΊ ϥΠϒϥϦͷதΛݟ͍ͯ͘ͱ
3FBDU/BUJWF(BNF&OHJOF ϧʔϓػೳ
-PPQ ήʔϜͰ௨ৗͷΞϓϦέʔγϣϯͱҟͳΓΠϕϯτຖࠁൃੜ ϥΠϒϥϦͰDPOTUSVDUPSʹͯɺTVCTDSJCF͍ͯ͠Δɻ DPNQPOFOU%JE.PVOUͰ։࢝͞ΕɺVQEBUF)BOEMFS͕ఆظతʹ࣮ߦ
-PPQ VQEBUF)BOEMFSͰ TZTUFNT͕࣮ߦ͞ΕΔɻ ͜͜ͰɺBSHTʹΠϕϯτ֤छ ͕ೖͬͯ͘Δɻ ͜Ε͕TZTZUFNTͰFOUJUJFT֤ छΠϕϯτΛड͚औΔ͜ͱ͕Ͱ ͖ΔΈɻ
-PPQ Ͳ͏ͬͯఆظ࣮ߦ͍ͤͯ͞Δͱ͍͏ͱ %FGBVMU5JNFS͕࣮ମɻ SFBDUHBNFMPPQͷUIBOLTɻ࣮ࡍʹιʔείʔυ΄ͱΜͲҰॹ ͩͬͨʢ͔ͯ͠͠ݩʑҰॹͩͬͨɾɾɾʁʣɻ SFRVFTU"OJNBUJPO'SBNF͕൜ਓͩͬͨʂ
3FBDU/BUJWF(BNF&OHJOF λονϋϯυϦϯά
3FBDU/BUJWF(BNF&OHJOF ֤छΠϕϯτϋϯυϦϯά͞Ε͍ͯΔɻ UPVDI1SPDFTTPSͰTUBSU NPWF FOEͦΕͧΕͷΠϕϯτ໊Ͱॲཧ
3FBDU/BUJWF(BNF&OHJOF ͦΕͧΕͷΠϕϯτΛॲཧɻ SYKTͰॲཧɻ QSFTTΠϕϯτͷมॲཧΠϕϯτ ͷ੍ޚΛߦͳ͍ͬͯΔɻ ͜Ε͕Πϕϯτ֤छΛड͚औΔ͜ͱ͕Ͱ ͖ΔΈɻ
3FBDU/BUJWF(BNF&OHJOF ϨϯμϦϯάػೳ
-PPQ SFOEFSFSͰϨϯμϦϯάɻ TDSFFO%JNFOTJPOTɺ MBZPVUMBZPVU&WFOU SFOEFSFSϓϩύςΟΛϨϯμϦ ϯάɻ ͜Ε͕FOUJUZͷใશͯड͚ औΔ͜ͱ͕Ͱ͖ΔΈɻ
8IBUʟTUIFIFMM ҙ
8IBUʟTUIFIFMM 3FBDUͬΆ͍ॻ͖ํ ͋Μ·ΓͰ͖ͳ͍
-PPQ ͍ͯ͠ΔFOUJUZEJE.PVOU ͰTUBUFߦ͖͕ܾఆ͢ΔͨΊɺ Ұͯ͠͠·͏ͱɺมߋ͕ Ͱ͖ͳ͘ͳΔ ͜ΕΛมߋ͢ΔͨΊʹTXBQ ϝιουΛ֎͔Β࣮ߦͯ͠Δ ඞཁ͕͋Δɻ
3FBDU/BUJWF(BNF&OHJOF ࣮ࡍʹ࡞ͬͯΈͨʂʂ
3FBDU/BUJWF(BNF&OHJOF ͓͔͞ͳλϫʔότϧ ͯ͠ɾɾɾ
0TBLBOB5PXFS#BUUMF ˔͏˔ͭλϫʔότϧͷ ͺɾɾɾΦϚʔδϡɻ ότϧػೳະ࣮ɻ མͪͯ͘Δ͓ڕɺ ϛΨϝͱΞΠφϝͱ͓ɻ ʹࢸͬͯಁաը૾͢Βݟ͔ͭΒͳ ͔ͬͨɻ ϑϦʔͷಁաը૾͕ཉ͍͠ɾɾɾɻ ը૾ෆʹΑΓத్ͳग़དྷʹɾɾɾ
่ΕͨΒήʔϜΦʔόʔɻ ճసͰ͖ΔʢҰԠʣ 0TBLBOB5PXFS#BUUMF
࡞Γํɻ ཧΤϯδϯNBUUFSKTɻ͜ΕʹΑͬͯ ཧԋࢉΛߦ͏ɻ 0TBLBOB5PXFS#BUUMF ॲཧ3FBDU/BUJWF(BNF&OHJOFΛհͯ͠ ߦ͏ɻ NBUUFSύεΛ͍࣋ͬͯΔͷͰɺ $PNQPOFOUͱύεΛϦϯΫͤ͞ͳ͕ΒϨϯ μϦϯά͢Δ͜ͱʹΑͬͯඳࣸ͢Δɻ
0TBLBOB5PXFS#BUUMF qPPS&OUJUZ চɻJT4UBUJDϓϩύςΟ ʹΑͬͯݻఆͱͳ Δɻ
0TBLBOB5PXFS#BUUMF pSTU@pTI&OUJUZ མͱ͢લͷڕɻ͜ͷஈ ֊Ͱ.BUUFSͷܭࢉ֎ ʹ͍Δɻ
0TBLBOB5PXFS#BUUMF pSTU@pTI&OUJUZ ࢦΛͨ࣌͠ʹʰམ Լʱͤ͞Δɻ ͜ͷ࣌ॳΊͯNBUUFSKT ͷੈքʹ͍ΕɺϦϯΫ ͤ͞Δ͜ͱʹΑͬͯ ཧԋࢉΛ։࢝͢Δɻ ΊͬͪΌΤϥʔग़ͯΔɾɾɾস ͋ͱͰܕ͚ɾɾɾɻ
0TBLBOB5PXFS#BUUMF "JOBNF$PNQPOFOU ࢸͬͯී௨ͷ3FBDU/BUJWFͷίʔυɻ $SFBUF4UZMF4IFFU͍ͯ͠ͳ͍ͷएؾ ͷ͍ͨΓɻ
0TBLBOB5PXFS#BUUMF "JOBNF$PNQPOFOU ࢸͬͯී௨ͷ3FBDU/BUJWFͷίʔυɻ $SFBUF4UZMF4IFFU͍ͯ͠ͳ͍ͷएؾ ͷ͍ͨΓɻ NBUUFSͰQPTJUJPO͕͞ΕΔͷͰͦ ΕΛܭࢉͯ͠ϦϯΫ͍ͤͯ͞Δɻ WIDTH HEIGHT POSITION
Left = POSITION.x - WIDTH/2 Top = POSITION.y - HEIGHT/2
0TBLBOB5PXFS#BUUMF "JOBNF$PNQPOFOU ճసSPUBUFͰදݱɻ ᶃɺᶄΑΓλϯδΣϯτʹΑΓճస֯ ΛٻΊΔɻ Rotate = Math.atan2(ᶄ, ᶃ) *
(180/π) ᶃ ᶄ ֯ܭࢉͱ͔ߴߍͿΓͩͬͨͷͰ͜Ε ͕ͿͬͪΌ͚͔ͬͨ͠স
0TBLBOB5PXFS#BUUMF མԼఆ ͷߴ͞ΑΓଟ͘མԼͨ͠߹ ήʔϜΤϯυɻ HEIGHT < y Y HEIGHT
3FBDU/BUJWF(BNF&OHJOF ݁
3FBDU/BUJWF(BNF&OHJOF ɾ΄΅.BUUFSKTήʔ Θͳ͍͍͚ͯ͘Ͳ ɻ ɾੑ্࣭4UBUF͕͍ʹ͍͘ʢߋ৽͍ͨ͠߹TXBQϝιουΛ࣮ ߦ͢Δඞཁʣɻ ɾ3FBDU/BUJWFڥͰήʔϜ͕࡞ΕΔ͕ɺSFOEFSFSͰ͏ίϯϙʔω ϯτ͙Β͍͔͠3FBDU/BUJWFͷ͕ࣝඞཁͳͱ͜Ζͳ͍ɻ ϧʔϓػೳΛఏڙͯ͘͠ΕΔίϯϙʔωϯτɻ ήʔϜ࡞ΔͳΒBTTFUఏڙ͞Ε͍ͯΔ˔OJUZʹ܉ഋ্͕͕Δɻ
ΠϯλϥΫςΟϒͳΞχϝʔγϣϯʹ͏߹ʹ͋Γ͔ɻ
3FBDU/BUJWF(BNF&OHJOF 3/ϓϩμΫτͷதͰϛχήʔϜΛ Γ͍ͨ߹ੋඇʂʂ