Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
React Native Game Engine in React Native Tech B...
Search
Sponsored
·
Your Podcast. Everywhere. Effortlessly.
Share. Educate. Inspire. Entertain. You do you. We'll handle the rest.
→
@YutamaKotaro
August 05, 2020
1
2k
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
250
ライブラリはしご酒
yutamakotaro
0
190
React + Valtio
yutamakotaro
0
130
My experience for 3 years with React Native
yutamakotaro
0
70
React Nativeと共に歩んだ3年間【TECH STAND #3】
yutamakotaro
1
1.4k
React Native Book
yutamakotaro
0
84
AWS Summit2019 airCloset section
yutamakotaro
1
230
フルJSアーキテクトで作るエアークローゼット
yutamakotaro
2
620
タイタニック ロジスティック回帰
yutamakotaro
0
190
Featured
See All Featured
Collaborative Software Design: How to facilitate domain modelling decisions
baasie
0
150
Leading Effective Engineering Teams in the AI Era
addyosmani
9
1.7k
Unlocking the hidden potential of vector embeddings in international SEO
frankvandijk
0
190
Optimising Largest Contentful Paint
csswizardry
37
3.6k
Bridging the Design Gap: How Collaborative Modelling removes blockers to flow between stakeholders and teams @FastFlow conf
baasie
0
470
職位にかかわらず全員がリーダーシップを発揮するチーム作り / Building a team where everyone can demonstrate leadership regardless of position
madoxten
61
51k
Navigating Weather and Climate Data
rabernat
0
130
Bash Introduction
62gerente
615
210k
Discover your Explorer Soul
emna__ayadi
2
1.1k
Navigating the Design Leadership Dip - Product Design Week Design Leaders+ Conference 2024
apolaine
0
220
ラッコキーワード サービス紹介資料
rakko
1
2.5M
Max Prin - Stacking Signals: How International SEO Comes Together (And Falls Apart)
techseoconnect
PRO
0
110
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/ϓϩμΫτͷதͰϛχήʔϜΛ Γ͍ͨ߹ੋඇʂʂ