initial commit

10 files changed, 824 insertions, 0 deletions

diff --git a/files/kab/games/imedyaten/index.html b/files/kab/games/imedyaten/index.html
new file mode 100644
index 0000000000..370f14cee4
--- /dev/null
+++ b/files/kab/games/imedyaten/index.html
@@ -0,0 +1,126 @@
+---
+title: Imedyaten
+slug: Games/Imedyaten
+translation_of: Games/Examples
+---
+<div>{{GamesSidebar}}</div><div>{{IncludeSubnav("/en-US/docs/Games")}}</div>
+
+<p class="summary">Asabter agi yesmirew  kra n timsenszaɣin  n tatiknulujit n web yesewhamen iw akken a tizmirem ad agmem tahregt,u a-tt-urarem sumata yis.d anagi n wayen i tzemrem a tgem s JavaScript,WebGL d tatiknulujit n tuqqna.snat n tigezmiwin timezwura tt-umuɣent uraren ay tt-uraren,mad wayeḍ asun n catch-all iw sken n timsenszaɣin ur nelli d aḍulli deg uraren imyermuden.</p>
+
+<div class="column-container">
+<div class="column-half">
+<h2 id="Uraren_n_baṭṭeltimsenszaɣin">Uraren n baṭṭel/timsenszaɣin</h2>
+
+<dl>
+ <dt><a href="http://www.beloola.com">Beloola</a></dt>
+ <dd> BeloolaWebVR d agwni sdded n iramsuten.tarmit yestufan deg igdilen 2D u ɣef VR HMD (Iɣewwaren / Eddu ɣer askar VR).</dd>
+ <dt><a href="http://playcanv.as/p/aP0oxhUr">Tanx</a></dt>
+ <dd>Urar imenɣi s <u><strong>char</strong></u> agetmyuraren,yett wasnulfa s <a href="https://playcanvas.com/">PlayCanvas</a>.</dd>
+ <dt><a href="https://robertsspaceindustries.com/comm-link/transmission/14704-Hyper-Vanguard-Force">Hyper Vanguard Force</a></dt>
+ <dd>Urar n nteg azidal n adrurem aratak.</dd>
+ <dt><a href="http://playcanv.as/p/JtL2iqIH">Swooop</a></dt>
+ <dd>Urar n tufga s usafag:snaɣdet asafag n wen u err-t-ed isɣunen.tikkelt nniḍen,yettwesnulfa s. <a href="https://playcanvas.com/">PlayCanvas</a>.</dd>
+ <dt><a href="https://ga.me/games/save-the-day">Sellek ass </a></dt>
+ <dd>Srifeg s helikupter usellek nnig umḍiq n tawaɣit u sellek tiɣtasin i weḥlen (ga.me.)</dd>
+ <dt><a href="https://ga.me/games/polycraft">Polycraft</a></dt>
+ <dd>Azder d urar n tudra.sniremet tigzirt u smernayet imsziwen.</dd>
+ <dt><a href="http://hexgl.bkcore.com/">HexGL</a></dt>
+ <dd>Urar n temszizla timalit arurad.</dd>
+ <dt><a href="http://beta.unity3d.com/jonas/DT2/">Dead Trigger 2</a></dt>
+ <dd>Igi aklassiki n usimas u ẓumbit get s. <a href="http://unity3d.com/">Unity3D</a>.</dd>
+ <dt><a href="http://beta.unity3d.com/jonas/AngryBots/">Angry Bots</a></dt>
+ <dd>Alyen-esque yiwen n timalt iẓumetrikit amdan wis 3 i nteg  imsenszaɣen eg s <a href="http://unity3d.com/">Unity3D</a>.</dd>
+ <dt><a href="http://sandbox.photonstorm.com/html5/nutmeg/">Nutmeg</a></dt>
+ <dd>Adrurem umaqqal n agwni d igi.</dd>
+ <dt><a href="http://zibbo.com/en/904/back-to-candyland-episode-1">Tuɣalin ɣer Candyland</a></dt>
+ <dt>Tamelɣa-3 (Candy Crush) aɣanib n urar.</dt>
+</dl>
+
+<dl>
+ <dt><a href="http://playbiolab.com/">Biolab Disaster</a></dt>
+ <dd>Side-scrolling adrurem n nteg.</dd>
+ <dt><a href="http://phoboslab.org/xtype/">X-Type</a></dt>
+ <dd> Timsenszaɣin aratak msudeɣent seg tallunt n nteg..</dd>
+ <dt><a href="http://phoboslab.org/xibalba/">Xibalba</a></dt>
+ <dd>Amahray(Doom Style) amsenṭeg amezwaru.</dd>
+ <dt><a href="https://timeinvariant.github.io/gorescript/play/">Gorescript</a></dt>
+ <dd>Aɣanib nniḍen amsenszaɣ amsenteg amezwaru .</dd>
+ <dt><a href="http://hypnoticowl.com/games/the-wizard/">Amarag</a></dt>
+ <dd>tidwelt ɣer tidwelt,urar n puzzle iɣrem.</dd>
+ <dt><a href="http://hextris.io/">Hextris</a></dt>
+ <dd>Tetris-am urar n puzzl <u><strong>higzagunal.</strong></u></dd>
+ <dt><a href="https://gabrielecirulli.github.io/2048/">2048</a></dt>
+ <dd>Uṭṭun n tucḍa urar puzzl d iqremyad.</dd>
+ <dt><a href="https://developer.mozilla.org/en-US/demos/detail/bananabread">Aɣṛum s banan</a></dt>
+ <dd>Urar n unteg ugarimyuraren 3D  aterras amezwaru ad isnefli s tallalt n Emscripten, WebGL et WebRTC.</dd>
+ <dt><a href="https://hacks.mozilla.org/2013/12/monster-madness-creating-games-on-the-web-with-emscripten/">Monster Madness</a></dt>
+ <dd>webGL d asm yeszadur ɣef u nteg ugarimyuraren deg izirig,yettwasnefli sɣuṛ  Nom Nom Games d usedhu n askar.</dd>
+ <dt><a href="http://www.auraluxgame.com/game/">Auralux</a></dt>
+ <dd>WebGL akked asm.js-based d urar n tastratijit:ṭṭefet-ed tifuktin iw akken a-tt-alek-eḍ!</dd>
+ <dt><a href="http://browserquest.mozilla.org/">BrowserQuest</a></dt>
+ <dd>MMORPG yesnulfat-id asakwen amecṭuḥ d Mozilla.</dd>
+ <dt><a href="https://arcade.ly/games/asteroids/">Shoot The Rocks</a></dt>
+ <dd>D urar n nteg aywan 2D deg ɣanib n wurar n talɣiqwit n itran aklasiki n Atari 1979.</dd>
+ <dt><a href="https://arcade.ly/games/starcastle/">Star Citadel</a></dt>
+ <dd>Yiwet n tuṭfa tamaynutt ɣer Star Castle, urar taɣiqwit n itran aklasiki 1980 n Cinematronics, yuli s uzeṭṭa 2D.</dd>
+</dl>
+
+<h2 id="Uraren_imsenziyen">Uraren imsenziyen</h2>
+
+<dl>
+ <dt><a href="http://oortonline.com/">Oort deg izirig </a></dt>
+ <dd>MMO d urar n usnirem,n usali d imenɣi (i teddu ɣer taneflit.)</dd>
+ <dt><a href="http://www.wizardslizard.com/">Amulab n imhergi </a></dt>
+ <dd>Asawen awessar Zelda-esque asnirem/RPG.</dd>
+ <dt><a href="http://qbqbqb.rezoner.net/">QbQbQb </a></dt>
+ <dd>D urar n puzzl talɣiqwit asentel n tussna tanaɣlant.</dd>
+ <dt><a href="http://elliotquest.com/">Elliot Quest</a></dt>
+ <dd>8-bit d urar tudlift n taluft tuɣalin.</dd>
+</dl>
+</div>
+
+<div class="column-half">
+<h2 id="Tamsenszayt_yemezgen">Tamsenszayt yemezgen</h2>
+
+<dl>
+ <dt><a href="http://greweb.me/wavegl/">WaveGL</a></dt>
+ <dd>Asziked WebGL i y iɣbula imsiwelen.</dd>
+ <dt><a href="http://codepen.io/jackrugile/pen/CdKGx/">Azeṭṭa utellel n unafag</a></dt>
+ <dd>Takarḍa yemrun i skanayen tinafagin ig qelɛen u ig ttṣubbun deg inafagen,u daɣen ijjaṛiḍen n iberdan n usrifeg.</dd>
+ <dt><a href="http://alteredqualia.com/xg/examples/animation_physics_terrain.html">Tamkfadut aɣaran</a></dt>
+ <dd>3D,tirrin,annar,ṭumubil,aseqdec <a href="https://github.com/kripken/ammo.js">ammo.js </a>iw siḍanen n aɣaran.</dd>
+ <dt><a href="http://david.li/flow/">Aktum Particle Flow</a></dt>
+ <dd>Assulu aɣaran amengi tufsiyt.</dd>
+ <dt><a href="http://codepen.io/artzub/pen/gszpJ/">Aṭarḍaq d wayen id yekkan segs</a></dt>
+ <dd>Asṭarḍaq n tizelɣayin ara d-yeglun d uṭarḍaq nniḍen..</dd>
+ <dt><a href="http://codepen.io/AshKyd/pen/sylFw">Agensatriw yettwasutayen seg uzeṭṭa</a></dt>
+ <dd>Agensatriw s taggust n uzungur di tuzzya.</dd>
+ <dt><a href="http://codepen.io/zadvorsky/pen/FAmuL">Digital Fireworks</a></dt>
+ <dd>Animated firework effects rendered on canvas.</dd>
+ <dt><a href="http://oos.moxiecode.com/js_webgl/autumn/">Autumn</a></dt>
+ <dd>Falling autumn leaves, with light source shining through. Created using <a href="https://github.com/mrdoob/three.js">Three.js</a>.</dd>
+ <dt><a href="http://inear.se/fireshader/">Fire walk with me</a></dt>
+ <dd>Billowing fire cloud effect.</dd>
+ <dt><a href="http://codepen.io/jackrugile/pen/AokpF">Rainbow Firestorm</a></dt>
+ <dd>Rainbow-coloured particles, falling like rain, bouncing around on a terrain of orbs.</dd>
+ <dt><a href="http://visualiser.fr/babylon/crowd/">Crowd Simulation</a></dt>
+ <dd>Simulation of a bustling crowd of people all trying to reach their opposite positions.</dd>
+ <dt><a href="http://codepen.io/noeldelgado/pen/ByxQjL">SVG Masking Experiment</a></dt>
+ <dd>An Xray machine, creating using an SVG mask.</dd>
+ <dt><a href="https://www.shadertoy.com/view/Ms2SD1">Realistic Water Simulation</a></dt>
+ <dd>Flowing water, like the waves on the ocean.</dd>
+ <dt><a href="http://www.haxor.xyz/demos/1.0/dungeon/">Dungeon demo</a></dt>
+ <dd>Haxor-based dungeon scene with walkable character.</dd>
+ <dt><a href="http://massiveassaultnetwork.com/html5/">Massive Assault tech demo</a></dt>
+ <dd>Rendered archipelago with futuristic military vehicles.</dd>
+ <dt><a href="https://callumprentice.github.io/apps/flight_stream/index.html">Flight Stream</a></dt>
+ <dd>3D globe with simulated flight paths.</dd>
+ <dt><a href="http://pixelscommander.com/polygon/htmlgl/demo/filters.html">WebGL filters</a></dt>
+ <dd>Demo showing WebGL filters being used to add effects to HTML elements.</dd>
+ <dt><a href="http://codepen.io/AshKyd/pen/zxmgzV">SVG isometic tiles</a></dt>
+ <dd>Generating isometric tiles with SVG matricies.</dd>
+ <dt><a href="https://jsfiddle.net/jetienne/rkth90c9/">ThreeJS App Player</a></dt>
+ <dd>A player into which you can load and run Three.js examples.</dd>
+</dl>
+</div>
+</div>
diff --git a/files/kab/games/index.html b/files/kab/games/index.html
new file mode 100644
index 0000000000..023e1c726b
--- /dev/null
+++ b/files/kab/games/index.html
@@ -0,0 +1,96 @@
+---
+title: Taneflit n wurar
+slug: Games
+translation_of: Games
+---
+<div>{{GamesSidebar}}</div>
+
+
+
+<p>Urar d-yiwen seg irmuden n Tasenselkimt aɣerfan.titiknulujiyin timaynutin ttawint-d yal ass asnefli arebbaw u seg widen iǧehden ig zemren ad iddu di yal iminig ɣef web arawas i tignutin.</p>
+
+<div><strong>Snefli uraren di web</strong></div>
+
+<div></div>
+
+<div class="column-container">
+<div class="column-half">
+<p>Anṣuf yissek ɣer s agans n usnefli n wurar MDN!deg taɣult agi n wasmel,nejajjaw tiɣbula i yinaflayen n web ig bɣan ad sneflin uraren.atafem ahdum ilmedẓanen d imagraden iteknikiten a yelhun deg umuɣ amenzawi ɣef zelmeḍ,ihi ur ttkukru ara snirmed.</p>
+
+<p>Nesekcem daɣen yiwet n tigezmi n tamselɣut akken a tizmirem s ttawil attafem isalen ɣef meṛṛa GSS ( aGrudem n uSihel n yiSnasen) yettwamahlen deg tasneflit n uraren,akked<a href="https://developer.mozilla.org/en-US/docs/Games/Tools/Engines_and_tools"> umuɣen imsaddayen </a>a yilhun d wallalen ad<a href="https://developer.mozilla.org/en-US/docs/Games/Examples"> uraren sumedya</a>.</p>
+
+<div class="note">
+<p> —Tamawt: Asnulfu n wuraren deg Web yers ɣef kra n titiknulujiyin Web n taffa am HTML,CSS d JavaScript. Tama <a href="/en-US/docs/Learn">Learning Area </a>tin yelhan i walmed n taffa .</p>
+</div>
+
+<dl>
+</dl>
+</div>
+
+<div class="column-half">
+<h2 id="Port_d_urar_agwneslul_deg_web">Port d urar agwneslul deg web</h2>
+
+<p>Ma yella teliḍ d-aneflay agwneslul(amedya uraren n tira s C++),u ma yella daɣen tɣeḍwfeḍ i wamek ara tesiwḍeḍ uraren ɣer web,yessefk attlemdeḍ xilla afecku nneɣ <a href="http://kripken.github.io/emscripten-site/index.html">Emscripten</a>-D asefsay LLVM ɣer JavaScript,ig ttaṭafen  LLVM bytecode (amedya,srew seg C / C ++ s tallalt n clang,neɣ seg tutlayt nniḍen)u ad isefsu ayagi ɣer <a href="/en-US/docs/Games/Tools/asm.js">asm.js</a>,ig zemren ad ittuselkem di web.</p>
+
+
+
+<p><strong>Iw sizmur, sesten: </strong></p>
+
+<ul>
+ <li><a href="http://kripken.github.io/emscripten-site/docs/introducing_emscripten/about_emscripten.html">Γef Emscripten</a> i tazwart ay s kecmen i sulliḍen ilhan nedzah,</li>
+ <li><a href="http://kripken.github.io/emscripten-site/docs/getting_started/downloads.html">Azdam anmeggag d usarsi</a> i usarsi n tazrart n ifecka.</li>
+ <li><a href="http://kripken.github.io/emscripten-site/docs/getting_started/Tutorial.html">Almeḍris Emscripten</a> i walmedẓan akken attlemdem asekker.</li>
+</ul>
+</div>
+</div>
+
+<div class="column-container">
+<div class="column-half">
+<h2 id="Imedyaten">Imedyaten</h2>
+
+
+
+<p>Iw umuɣ imedyaten n uraren Web,wali <a href="https://developer.mozilla.org/en-US/docs/Games/Examples">asebter nneɣ imedyaten</a>.sesten daɣen<a href="http://www.openwebgames.com/#/home.html"> openwebgames.com</a> i tiɣbula d imedyaten i wulmen.</p>
+
+
+</div>
+</div>
+
+<p><a href="http://www.openwebgames.com"><img alt="" src="https://mdn.mozillademos.org/files/12790/owg-logo-dark.svg" style="display: block; margin: 0px auto; width: 400px;"></a></p>
+
+<h2 id="Wali_daɣen">Wali daɣen</h2>
+
+<div class="column-container">
+<div class="column-half">
+<dl>
+ <dt><a href="http://buildnewgames.com/">Snulfud uraren imaynuten</a></dt>
+ <dd>D asmel asdukkalan ig rran azal i waṭas n ilmeḍras n taneflit n uraren Web yeldin.acukkan ur lḥin ara akken i wullem,maca ɣurṣen taɣbalut ilhan.</dd>
+ <dt><a href="http://creativejs.com/">Asnulfu JS</a></dt>
+ <dd>D yiwet n Talkensit ti tiknikiyin  JavaScript yesewhamen d waṭas n tirmitin,wer sefru i  wuraren,acu kkan wulmen.ussan agi ur yermed,maca yeṭṭef tiɣbula yelhan.</dd>
+ <dt><a href="http://gameprogrammingpatterns.com/">Tamudemt usihel n uraren</a></dt>
+ <dd>Adlis ar uqqin,yura Bob Nystrom,ig ttmeslayen ɣef timudmiwin n usihel deg tawenna n taneflit n urar iw akken a nefk tallalt i yineflayen n uraren akken ad ger tangalt i fazen.<br>
+  </dd>
+ <dt><a href="http://gamedevjsweekly.com/">Gamedeγ.js Weekly</a></dt>
+ <dd>Gamedev.js tanfult n dduṛt iw snefli n uraren HTML5,i d ittwaznen yal sḍisass.degs ameɣlal aneggaru n imagraden,almeḍris,ifecka d iɣbula.</dd>
+ <dt><a href="http://www.html5gamedevs.com/">Agraw n amyannan HTML5</a></dt>
+ <dd>Agraw n ineflayen,isnulfuyen n ikataren d imaszṛagen.mmud tuttra,ad awiḍ iwenniten,a tefkeḍ tallalt i wiyaḍ.</dd>
+</dl>
+</div>
+
+<div class="column-half">
+<dl>
+ <dt><a href="http://html5gameengine.com/">Amsadday n unadi HTML5</a></dt>
+ <dd>Umuɣ ikataren n uraren HTML5 aɣerfan akked summa n sen,Tiskanin d tilemmicin.</dd>
+ <dt><a href="http://www.jsbreakouts.org/">JSBreakouts</a></dt>
+ <dd>Snemhel ijguya n Breakout JavaScript deg yal imezlan n ikataren iw akken attafem tallalt u attfernem akken iwata.</dd>
+ <dt><a href="https://gamedevelopment.tutsplus.com/">Tuts+ asnefli n urar</a></dt>
+ <dd>Ilmedṛisen d imagraden deg taneflit n uraren sumata.</dd>
+ <dt><a href="http://html5gameengine.com/">Amsekker HTML5</a></dt>
+ <dd>Starter iy imsnefliyen n uraren,yiwen wumuɣ n iseɣwen n aṭas iɣbula useqdec deg Web.</dd>
+ <dt><a href="http://js13kgames.com/">js13kGames</a></dt>
+ <dd>JavaScript  tamenziɣt tangalt i yimsnefliyen n uraren HTML5 akked ubadu n tiddi n ifuyla yerṣa ɣer 13 kilubytes. meṛṛa uraren zeggszan ttwaheggan s udem n talɣa yettwaɣṛan deg GitHub.0.</dd>
+ <dt><a href="https://hacks.mozilla.org/category/games/">Ablug n Mozilla hacks</a></dt>
+ <dd>Taggayt n uraren deg ablug Mozilla Hacks nagbas imagraden ackiten ɣef  gamedev.</dd>
+</dl>
+</div>
+</div>
diff --git a/files/kab/games/techniques/3d_collision_detection/index.html b/files/kab/games/techniques/3d_collision_detection/index.html
new file mode 100644
index 0000000000..7596fba5d1
--- /dev/null
+++ b/files/kab/games/techniques/3d_collision_detection/index.html
@@ -0,0 +1,148 @@
+---
+title: 3D   Tifin umbberez
+slug: Games/Techniques/3D_collision_detection
+translation_of: Games/Techniques/3D_collision_detection
+---
+<div>{{GamesSidebar}}</div>
+
+<p class="summary">Amagrad agi yettakked tazwart i yal itiknikiyen n wablaɣ n ujemmeq yettwasqedcen iw sedday n tifin umbberez deg tiwenaḍin 3D.imagraden n uḍfaṛ i tuddela usedday deg timkkarḍitin tulmisin 3D.</p>
+
+<h2 id="Tankult_n_ujemmeq_usemsawi_ɣef_tinakatin">Tankult n ujemmeq usemsawi ɣef tinakatin</h2>
+
+<p>Am tifin umbberez 2D,<strong>tinakatin ujemmeq asemsawi n ugellus</strong> (TJSG) d iwarzimen izerben i w-guccel n sin-agi  ifendasen n wurar ma yella sembebbin naɣ uhu.ayagi i w-sburu ifendasen n wurar deg yiwet n tanaka ur nezzi.(akka tesemsawi s agellus) u ad tesselken ideggan n tixxamin deg tallunt n imsidag 3D akken ad nẓar ma yella temsembeddint.</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/11797/Screen%20Shot%202015-10-16%20at%2015.11.21.png" style="display: block; height: 275px; margin: 0px auto; width: 432px;"></p>
+
+<p><strong>Tugdda yemsemsawin ɣef tanaka</strong> tella i wakken ad illint timellal.asembebbi gar snat n tinakatin ur nezzi nezmer ad ttwadaddent s isnemhal timeẓliwin daya,maca tinakatin yezzin yessefk-asent timehlin timastayin,ig ẓayen i usiḍen.ma ɣuṛwen ifendasen ara yezzin,tzemrem ad tbeddelem iseggiwen n taɣzut n talast i wakken ad yesegrer yal ass taɣawsa,neɣ ma ulac ad yili ufran nniḍen n tanzeggit n talast,am tabluleɣt (yellan ttimsaritin i tuzzya).yeskanay-d amedya n tuzzya n  (TJSG) i  yesmezgay afendas yettezzin,tanaka tettbeddil yal ass tisektiwin i wakken ad tesmezgay akken iwata ɣer tanaka yellan degs.</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/11799/rotating_knot.gif" style="display: block; height: 192px; margin: 0px auto; width: 207px;"></p>
+
+<div class="note">
+<p><strong>Tamawt:</strong> Walit amagrad <a href="https://developer.mozilla.org/en-US/docs/Games/Techniques/3D_collision_detection/Bounding_volume_collision_detection_with_THREE.js">Bounding Iblaɣen akked Three.js</a> iw akken ateẓṛem asnulfu yellan tallilt n tatiknikit agi.</p>
+</div>
+
+<h3 id="Ired_mgal_TJSG">Ired mgal TJSG</h3>
+
+<p>Sefqed  ired ma yella deg gensu n TJSG (AABB) ayagi d afrari - neḥwaǧ kan ad nefrari  imsidgen n yired yellan deg gensu n TJSG (AABB);get yal agellus s ubrez.anɣil belli Px, Py ad Pz d imsigen n yired  BminX-BmaxX,BminY-BmaxY ed BminZ-BmaxZ nutenti id tagrummiwin n yal exist n TJSG (AABB),nezmer ad nesḍen ma yeḍṛa-d umbberez gar sin-agi s useqdec n tsemselt-agi:</p>
+
+<p><math><semantics><mrow><mi>f</mi><mo stretchy="false">(</mo><mi>P</mi><mo>,</mo><mi>B</mi><mo stretchy="false">)</mo><mo>=</mo><mo stretchy="false">(</mo><msub><mi>P</mi><mi>x</mi></msub><mo>&gt;=</mo><msub><mi>B</mi><mrow><mi>add</mi><mi></mi><mi></mi><mi>X</mi></mrow></msub><mo>∧</mo><msub><mi>P</mi><mi>x</mi></msub><mo>&lt;=</mo><msub><mi>B</mi><mrow><mi>afel</mi><mi></mi><mi></mi><mi>X</mi></mrow></msub><mo stretchy="false">)</mo><mo>∧</mo><mo stretchy="false">(</mo><msub><mi>P</mi><mi>y</mi></msub><mo>&gt;=</mo><msub><mi>B</mi><mrow><mi>add</mi><mi></mi><mi></mi><mi>Y</mi></mrow></msub><mo>∧</mo><msub><mi>P</mi><mi>y</mi></msub><mo>&lt;=</mo><msub><mi>B</mi><mrow><mi>afel</mi><mi></mi><mi></mi><mi>Y</mi></mrow></msub><mo stretchy="false">)</mo><mo>∧</mo><mo stretchy="false">(</mo><msub><mi>P</mi><mi>z</mi></msub><mo>&gt;=</mo><msub><mi>B</mi><mrow><mi>add</mi><mi></mi><mi></mi><mi>Z</mi></mrow></msub><mo>∧</mo><msub><mi>P</mi><mi>z</mi></msub><mo>&lt;=</mo><msub><mi>B</mi><mrow><mi>afel</mi><mi></mi><mi></mi><mi>Z</mi></mrow></msub><mo stretchy="false">)</mo></mrow><annotation encoding="TeX">f(P,B)= (P_x &gt;= B_{minX} \wedge P_x &lt;= B_{maxX}) \wedge (P_y &gt;= B_{minY} \wedge P_y &lt;= B_{maxY}) \wedge (P_z &gt;= B_{minZ} \wedge P_z &lt;= B_{maxZ})</annotation></semantics></math></p>
+
+<p>Anda deg JavaScript:</p>
+
+<pre class="brush: js">Tasɣent d ired deg gensu n TJSB AABB(ired, tanaka) {
+ Tuɣalin(ired.x &gt;= tanaka.addayX &amp;&amp; ired.x &lt;= tanaka.afellayX) &amp;&amp;
+         (ired.y &gt;= tanaka.addayY &amp;&amp; ired.y &lt;= tanaka.afellayY) &amp;&amp;
+         (ired.z &gt;= tanaka.addayY &amp;&amp; ired.z &lt;= tanaka.afellayZ);
+}</pre>
+
+<h3 id="AABB_mgal_AABB">AABB mgal AABB</h3>
+
+<p>Sefqed ma yella AABB imyagger AABB nniḍen deg ukayad n yired.Neḥwaǧ kan ad neg akayad i yal agellas , s useqdec n ibuda n tinakatin.ameskan-agi sedaw-a yeskanay-d akayad i nessedday ɣef ugellus n X-adasil,tiseddaṛin <em>A<sub>ddayX</sub></em>–<em>A<sub>fellayX</sub></em> ed <em>B<sub>ddayX</sub></em>–<em>B<sub>fellayX</sub></em>  semnenint?</p>
+
+<p><img alt="updated version" src="https://mdn.mozillademos.org/files/11813/aabb_test.png" style="display: block; height: 346px; margin: 0px auto; width: 461px;"></p>
+
+<p>S tusnakt atan dacu ara d-yefɣen:<math><semantics><mrow><mi></mi></mrow></semantics></math></p>
+
+<p><math><semantics><mrow><mi>f</mi><mo stretchy="false">(</mo><mi>A</mi><mo>,</mo><mi>B</mi><mo stretchy="false">)</mo><mo>=</mo><mo stretchy="false">(</mo><msub><mi></mi><mrow><mi></mi><mi></mi><mi></mi><mi></mi></mrow></msub><mo>&lt;=</mo><msub><mi>B</mi><mrow><mi>fellay</mi><mi>X</mi></mrow></msub><mo>∧</mo><msub><mi>A</mi><mrow><mi>fellay</mi><mi>X</mi></mrow></msub><mo>&gt;=</mo><msub><mi>B</mi><mrow><mi>dday</mi><mi>X</mi></mrow></msub><mo stretchy="false">)</mo><mo>∧</mo><mo stretchy="false">(</mo><msub><mi>A</mi><mrow><mi>dday</mi><mi>Y</mi></mrow></msub><mo>&lt;=</mo><msub><mi>B</mi><mrow><mi>fellay</mi><mi>Y</mi></mrow></msub><mo>∧</mo><msub><mi>A</mi><mrow><mi>fellay</mi><mi>Y</mi></mrow></msub><mo>&gt;=</mo><msub><mi>B</mi><mrow><mi>dday</mi><mi></mi><mi></mi><mi>Y</mi></mrow></msub><mo stretchy="false">)</mo><mo>∧</mo><mo stretchy="false">(</mo><msub><mi>A</mi><mrow><mi>dday</mi><mi>Z</mi></mrow></msub><mo>&lt;=</mo><msub><mi>B</mi><mrow><mi>fellay</mi><mi></mi><mi></mi><mi>Z</mi></mrow></msub><mo>∧</mo><msub><mi>A</mi><mrow><mi>fellay</mi><mi></mi><mi></mi><mi>Z</mi></mrow></msub><mo>&gt;<sup>=</sup></mo><msub><mi><sup>B</sup></mi><mrow><mi><sup>fellay</sup></mi><mi></mi><mi></mi><mi><sup>Z</sup></mi></mrow></msub><mo stretchy="false"><sup>)</sup></mo></mrow><annotation encoding="TeX"></annotation></semantics></math><sup>f(A,B) =</sup></p>
+
+<p>u deg JavaScript ad neseqdec aya:</p>
+
+<pre class="brush: js">   Tiseɣnatin myaggerent(a, b) {
+   tuɣalin (a.ddayX &lt;= b.fellayX &amp;&amp; a.fellayX &gt;= b.ddayX) &amp;&amp;
+         (a.ddayY &lt;= b.fellayY &amp;&amp; a.fellayY &gt;= b.ddayY) &amp;&amp;
+         (a.ddayZ &lt;= b.fellayZ &amp;&amp; a.fellayZ &gt;= b.ddayZ); </pre>
+
+<h2 id="Bounding_spheres">Bounding spheres</h2>
+
+<p>Using bounding spheres to detect collisions is a bit more complex than AABB, but still fairly quick to test. The main advantage of spheres is that they are invariant to rotation, so if the wrapped entity rotates, the bounding sphere would still be the same. Their main disadvantage is that unless the entity they are wrapping is actually spherical, the wrapping is usually not a good fit (i.e. wrapping a person with a bounding sphere will cause a lot of false positives, whereas a AABB would be a better match).</p>
+
+<h3 id="Point_versus_sphere">Point versus sphere</h3>
+
+<p>To check whether an sphere contains a point we need to calculate the distance between the point and the sphere's center. If this distance is smaller than or equal to the radius of the sphere, the point is inside it.</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/11803/point_vs_sphere.png" style="display: block; height: 262px; margin: 0px auto; width: 385px;"></p>
+
+<p>Taking into account that the euclidean distance between two points <em>A</em> and <em>B</em> is <math><semantics><msqrt><mrow><mo stretchy="false">(</mo><msub><mi>A</mi><mi>x</mi></msub><mo>-</mo><msub><mi>B</mi><mi>x</mi></msub><msup><mo stretchy="false">)</mo><mn>2</mn></msup><mo stretchy="false">)</mo><mo>+</mo><mo stretchy="false">(</mo><msub><mi>A</mi><mi>y</mi></msub><mo>-</mo><msub><mi>B</mi><mi>y</mi></msub><msup><mo stretchy="false">)</mo><mn>2</mn></msup><mo>+</mo><mo stretchy="false">(</mo><msub><mi>A</mi><mi>z</mi></msub><mo>-</mo><msub><mi>B</mi><mi>z</mi></msub><mo stretchy="false">)</mo></mrow></msqrt><annotation encoding="TeX">\sqrt{(A_x - B_x) ^ 2) + (A_y - B_y)^2 + (A_z - B_z)}</annotation></semantics></math> , our formula for point versus sphere collision detection would work out like so:</p>
+
+<p><math><semantics><mrow><mi>f</mi><mo stretchy="false">(</mo><mi>P</mi><mo>,</mo><mi>S</mi><mo stretchy="false">)</mo><mo>=</mo><msub><mi>S</mi><mrow><mi>r</mi><mi>a</mi><mi>d</mi><mi>i</mi><mi>u</mi><mi>s</mi></mrow></msub><mo>&gt;=</mo><msqrt><mrow><mo stretchy="false">(</mo><msub><mi>P</mi><mi>x</mi></msub><mo>-</mo><msub><mi>S</mi><mi>x</mi></msub><msup><mo stretchy="false">)</mo><mn>2</mn></msup><mo>+</mo><mo stretchy="false">(</mo><msub><mi>P</mi><mi>y</mi></msub><mo>-</mo><msub><mi>S</mi><mi>y</mi></msub><msup><mo stretchy="false">)</mo><mn>2</mn></msup><mo>+</mo><mo stretchy="false">(</mo><msub><mi>P</mi><mi>z</mi></msub><mo>-</mo><msub><mi>S</mi><mi>z</mi></msub><msup><mo stretchy="false">)</mo><mn>2</mn></msup></mrow></msqrt></mrow><annotation encoding="TeX">f(P,S) = S_{radius} &gt;= \sqrt{(P_x - S_x)^2 + (P_y - S_y)^2 + (P_z - S_z)^2}</annotation></semantics></math></p>
+
+<p>Or in JavaScript:</p>
+
+<pre class="brush: js">function isPointInsideSphere(point, sphere) {
+  // we are using multiplications because is faster than calling Math.pow
+  var distance = Math.sqrt((point.x - sphere.x) * (point.x - sphere.x) +
+                           (point.y - sphere.y) * (point.y - sphere.y) +
+                           (point.z - sphere.z) * (point.z - sphere.z));
+  return distance &lt; sphere.radius;
+}
+</pre>
+
+<div class="note">
+<p>The code above features a square root, which can be expensive to calculate. An easy optimization to avoid it consists of squaring the radius, so the optimized equation would instead involve <code>distance &lt; sphere.radius * sphere.radius</code>.</p>
+</div>
+
+<h3 id="Sphere_versus_sphere">Sphere versus sphere</h3>
+
+<p>The sphere vs sphere test is similar to the point vs sphere test. What we need to test here is that the distance between the sphere's centers is less than or equal to the sum of their radii.</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/11805/sphere_vs_sphere.png" style="display: block; height: 262px; margin: 0px auto; width: 414px;"></p>
+
+<p>Mathematically, this looks like so:</p>
+
+<p><math><semantics><mrow><mi>f</mi><mo stretchy="false">(</mo><mi>A</mi><mo>,</mo><mi>B</mi><mo stretchy="false">)</mo><mo>=</mo><msqrt><mrow><mo stretchy="false">(</mo><msub><mi>A</mi><mi>x</mi></msub><mo>-</mo><msub><mi>B</mi><mi>x</mi></msub><msup><mo stretchy="false">)</mo><mn>2</mn></msup><mo>+</mo><mo stretchy="false">(</mo><msub><mi>A</mi><mi>y</mi></msub><mo>-</mo><msub><mi>B</mi><mi>y</mi></msub><msup><mo stretchy="false">)</mo><mn>2</mn></msup><mo>+</mo><mo stretchy="false">(</mo><msub><mi>A</mi><mi>z</mi></msub><mo>-</mo><msub><mi>B</mi><mi>z</mi></msub><msup><mo stretchy="false">)</mo><mn>2</mn></msup></mrow></msqrt><mo>&lt;=</mo><msub><mi>A</mi><mrow><mi>r</mi><mi>a</mi><mi>d</mi><mi>i</mi><mi>u</mi><mi>s</mi></mrow></msub><mo>+</mo><msub><mi>B</mi><mrow><mi>r</mi><mi>a</mi><mi>d</mi><mi>i</mi><mi>u</mi><mi>s</mi></mrow></msub></mrow><annotation encoding="TeX">f(A,B) = \sqrt{(A_x - B_x)^2 + (A_y - B_y)^2 + (A_z - B_z)^2} &lt;= A_{radius} + B_{radius}</annotation></semantics></math></p>
+
+<p>Or in JavaScript:</p>
+
+<pre class="brush: js">function intersect(sphere, other) {
+  // we are using multiplications because it's faster than calling Math.pow
+  var distance = Math.sqrt((sphere.x - other.x) * (sphere.x - other.x) +
+                           (sphere.y - other.y) * (sphere.y - other.y) +
+                           (sphere.z - other.z) * (sphere.z - other.z));
+  return distance &lt; (sphere.radius + other.radius); }
+}</pre>
+
+<h3 id="Sphere_versus_AABB">Sphere versus AABB</h3>
+
+<p>Testing whether a sphere and an AABB are colliding is slightly more complicated, but still simple and fast. A logical approach would be to check every vertex of the AABB, doing a point vs sphere test for each one. This is overkill however — testing all the vertices is unnecessary, as we can get away with just calculating the distance between the AABB's <em>closest</em><em> point</em> (not necessarily a vertex) and the sphere's center, seeing if it is less than or equal to the sphere's radius. We can get this value by clamping the sphere's center to the AABB's limits.</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/11837/sphere_vs_aabb.png" style="display: block; height: 282px; margin: 0px auto; width: 377px;"></p>
+
+<p>In JavaScript, we'd do this test like so:</p>
+
+<pre class="brush: js">function intersect(sphere, box) {
+  // get box closest point to sphere center by clamping
+  var x = Math.max(box.minX, Math.min(sphere.x, box.maxX);
+  var y = Math.max(box.minY, Math.min(sphere.y, box.maxY);
+  var z = Math.max(box.minZ, Math.min(sphere.z, box.maxZ);
+
+  // this is the same as isPointInsideSphere
+  var distance = Math.sqrt((x - sphere.x) * (x - sphere.x) +
+                           (y - sphere.y) * (y - sphere.y) +
+                           (z - sphere.z) * (z - sphere.z));
+
+  return distance &lt; sphere.radius;
+}
+
+</pre>
+
+<h2 id="Using_a_physics_engine">Using a physics engine</h2>
+
+<p><strong>3D physics engines</strong> provide collision detection algorithms, most of them based on bounding volumes as well. The way a physics engine works is by creating a <strong>physical body</strong>, usually attached to a visual representation of it. This body has properties such as velocity, position, rotation, torque, etc., and also a <strong>physical shape</strong>. This shape is the one that is considered in the collision detection calculations.</p>
+
+<p>We have prepared a <a href="http://mozdevs.github.io/gamedev-js-3d-aabb/physics.html">live collision detection demo</a> (with <a href="https://github.com/mozdevs/gamedev-js-3d-aabb">source code</a>) that you can take a look at to see such techniques in action — this uses the open-source 3D physics engine <a href="https://github.com/schteppe/cannon.js">cannon.js</a>.</p>
+
+<h2 id="See_also">See also</h2>
+
+<p>Related articles on MDN:</p>
+
+<ul>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Games/Techniques/3D_collision_detection/Bounding_volume_collision_detection_with_THREE.js">Bounding volumes collision detection with Three.js</a></li>
+ <li><a href="/en-US/docs/Games/Techniques/2D_collision_detection">2D collision detection</a></li>
+</ul>
+
+<p>External resources:</p>
+
+<ul>
+ <li><a href="http://www.gamasutra.com/view/feature/3383/simple_intersection_tests_for_games.php">Simple intersection tests for games</a> on Gamasutra</li>
+ <li><a href="https://en.wikipedia.org/wiki/Bounding_volume">Bounding volume</a> on Wikipedia</li>
+</ul>
diff --git a/files/kab/games/techniques/3d_on_the_web/basic_theory/index.html b/files/kab/games/techniques/3d_on_the_web/basic_theory/index.html
new file mode 100644
index 0000000000..23774dbc5e
--- /dev/null
+++ b/files/kab/games/techniques/3d_on_the_web/basic_theory/index.html
@@ -0,0 +1,119 @@
+---
+title: Azzegzi n tiszri tamedrut n 3D
+slug: Games/Techniques/3D_on_the_web/Basic_theory
+translation_of: Games/Techniques/3D_on_the_web/Basic_theory
+---
+<div>{{GamesSidebar}}</div><p>Amagrad agi yezzegzey meṛṛa tiszrit n taffa ig wulmen att tissinem mara tebdum leqdic s 3D.</p>
+
+<h2 id="Anagraw_n_tismsidegt">Anagraw n tismsidegt</h2>
+
+<p>3D d tumasant deg sebggen n tallɣa deg tallunt n 3D,s unagraw ig tt wasqedcen iw siḍan n tadeɣṛa.</p>
+
+<p><img alt="Coordinate system" src="https://mdn.mozillademos.org/files/13326/mdn-games-3d-coordinate-system.png" style="height: 338px; width: 600px;"></p>
+
+<p>WebGL iseqdac anagraw n tamsidegt n yefus-agellus n x sweṛen ɣer yefus,agellus n y sweṛen d sawen,,agellus n z  sweṛen beṛṛa n wagdil,am akka ne ttwali deg adyagram agi safella.</p>
+
+<h2 id="Taɣawsa">Taɣawsa</h2>
+
+<p>Imeẓliyen n inawen tɣawsiwin ttwassalin s tallat n Vertex.d yiwen n ired deg tallunt ɣuṛes tadeɣṛa ines 3D deg anagraw n tamsidegt u tikkwal n isallen yernnan i ti sesbadu.yal ired yett wasen s wayla yagi.</p>
+
+<ul>
+ <li><strong>Tade</strong>ɣra: yumagit deg tallunt 3D  (x, y, z).</li>
+ <li><strong>Ini</strong>: Ini yesesfel tawaṭfa wazal RGBA (R,G ed B i yibuda azeggaɣ,azyza d asẓerwal,Alpha i tafrawent -meṛṛa azalen teddun seg 0,0 à 1,0).</li>
+ <li><strong>Amagnu:</strong>S wammek ara tglemeḍ talmehla i deg tella vertex.</li>
+ <li><strong>Tasuddest</strong>:Tugna 2D ig zmmer att s waseqdec deg vertex i lmend n udleg n tasna,ye kkad seg ini afrari.</li>
+</ul>
+
+<p>tzemmrem a tesalim tanzeggit s useqdec n isal agi. — Atan umedya n agasas.</p>
+
+<p><img alt="Cube" lang="Kab" src="https://mdn.mozillademos.org/files/13324/mdn-games-3d-cube.png" style="height: 265px; width: 600px;"></p>
+
+<p>Udem n talɣa ye llan daɣawas ger vertices.amedya yiwen ugasas n 8 tikyutin yemgaraden (ired deg tallunt) d 6 udmawen yemgaraden, yalta tett wasers ɣef 4 n vertices.tagnut tesbadu tamehla ideg udem yett wanil.u yerna,s tuqqna n irden,nesnulfuyed idisan n ugasas.tanzeggit tett wasers seg takyut ed wudem, mad angawi d tasuddest,ig seqdacen ini neɣ tugna.ma sdded tanzeggit ɣer tasuddest,ad nesufeɣ tindar.</p>
+
+<h2 id="Iqadusen_n_tikci">Iqadusen n tikci</h2>
+
+<p>iqadusenn n tikci d akala iseg tugniwin ttwaheggant u ttefɣent-ed deg wagdil.iqadusen n tikci tudlift tettaṭaf tiɣawsiwin 3D yett wasersen seg<strong> timenza</strong> yeglemen s tallat n<strong> vertices</strong>,sisnes asekker,ssiḍan <strong>ticlextin</strong> u arriten ɣer 2D s iferdisen.</p>
+
+<p><img alt="Rendering pipeline" src="https://mdn.mozillademos.org/files/13334/mdn-games-3d-rendering-pipeline.png" style="height: 225px; width: 600px;"></p>
+
+<p>Tasniremt ig ttwa sqedcen deg zenziɣ agi safella ttagi:</p>
+
+<ul>
+ <li> <strong>Tammenzut</strong>: Anekcum deg qadusen-tett wasres seg vertices izmmer ad yilli d akerdis,d ired neɣ d izirig.</li>
+ <li><strong>Ticelxet</strong>:Yiwet n tigri 3D n tindar,ig sɛan meṛṛa d ayla yiwet n tindar.</li>
+ <li><strong>Tindar</strong>:<strong> </strong> Ired ɣef ugdil yersen deg iẓiki 2D,ig ṭefen ini RGBA.</li>
+</ul>
+
+<p>Asekker<strong> (vertex) </strong>n tikyutin ed ticelxet ttussihel. —tzemmrem a ttarum i schaders nwen ig sqerdcen tuffɣa.</p>
+
+<h2 id="Asekker_n_vertex">Asekker n vertex</h2>
+
+<p>Asekker n vertex ttwagan iw sdukkel n isalen ɣef vertices tisemdanin iw sdabu n imsidag deg tallunt n 3D iw akken ameshanay a ten iẓeṛ.am tuṭfa n tugna n wadlag id heggam<br>
+ -ye seffk a tesersem tiɣawsiwin timezwura,swel kameṛa,dɣa ṭefed tugna.</p>
+
+<p><img alt="Vertex processing" src="https://mdn.mozillademos.org/files/13336/mdn-games-3d-vertex-processing.png" style="height: 338px; width: 600px;"></p>
+
+<p>4 imecwaṛen ig llan deg asekker: tamezwarut tga iw tuddsa n tiɣawsiwin deg amaḍal,sawelen-as<strong> asseɣwel</strong> <strong>n wafrun</strong>.ticki, yella <strong>usseɣwel n iẓeri</strong> ig ttḥadaren ɣef tasdeɣṛiwt ed uslugen n taɣda n kamera deg tallunt 3D.Takamerat ɣuṛes kṛad imesktayen-asun,tanila ed taɣda-yesefk ad ttwa sbadunt iw sayes id yett wasnulfan tura.</p>
+
+<p><img alt="Camera" src="https://mdn.mozillademos.org/files/13322/mdn-games-3d-camera.png" style="height: 225px; width: 600px;"></p>
+
+<p>Aseɣwel n tigri (sawelen-as daɣen aseɣwel n tasmuɣlit) tes unmil iɣewwaṛen n taweṣṣaft .yesiswel ayen tezmmer atẓeṛ takamerat —Tawila ɣuṛes tahri n tmuɣli, assaɣ n timeszrit ed Tixtiɣiyin i qarben u i yuden. iw akken a ttissinem ugar eɣret <a href="en-US/docs/Games/Techniques/3D_on_the_web/Building_up_a_basic_demo_with_Three.js#Camera">Taseddart kamera</a> ye llan deg magrad  Three.js.</p>
+
+<p><img alt="Camera settings" src="https://mdn.mozillademos.org/files/13320/mdn-games-3d-camera-settings.png" style="height: 324px; width: 590px;"></p>
+
+<p>Amecwaṛ aneggaru n usfaylu,ig gllan stufɣa u tinɣers  aqadus n usuɣel.</p>
+
+<h2 id="Isisirew">Isisirew</h2>
+
+<p>Isisirew iselkit timenza (ye llan deg takyut yedduden) deg tiẓri n icelxen.</p>
+
+<p><img alt="Rasterization" src="https://mdn.mozillademos.org/files/13332/mdn-games-3d-rasterization.png" style="height: 338px; width: 600px;"></p>
+
+<p>Ticlextin agi-ig llan d isenẓaṛen 3D iferdisen n tugna 2D-myedrasen ɣef iẓiki n iferdisen n tugna,iw akken ad yezmmir asiggez ɣef  wagdil 2D deg mecwar n wazday tuffɣa.</p>
+
+<h2 id="Asekker_n_icelxan">Asekker n icelxan</h2>
+
+<p>Fragment processing focuses on textures and lighting — it calculates final colors based on the given parameters.</p>
+
+<p><img alt="Fragment processing" src="https://mdn.mozillademos.org/files/13328/mdn-games-3d-fragment-processing.png" style="height: 338px; width: 600px;"></p>
+
+<h3 id="Tasuddest">Tasuddest</h3>
+
+<p>Textures are 2D images used in the 3D space to make the objects look better and more realistic. Textures are combined from single texture elements called texels the same way picture elements are combined from pixels. Applying textures onto objects during the fragment processing stage of the rendering pipeline allows us to adjust it by wrapping and filtering it if necessary.</p>
+
+<p>Texture wrapping allows us to repeat the 2D image around the 3D object. Texture filtering is applied when the original resolution or the texture image is different from the displayed fragment — it will be minified or magnified accordingly.</p>
+
+<h3 id="Tafat">Tafat</h3>
+
+<p>The colors we see on the screen is a result of the light source interacting with the surface colors of the object's material. Light might be absorbed or reflected. The standard <strong>Phong Lighting Model</strong> implemented in WebGL has four basic types of lighting:</p>
+
+<ul>
+ <li><strong>Snezwi</strong>: A distant directional light, like the sun.</li>
+ <li><strong>Specular</strong>: A point of light, just like a light bulb in a room or a flash light.</li>
+ <li><strong>Isweɣ</strong>: The constant light applied to everything on the scene.</li>
+ <li><strong>Asgel</strong>: The light emitted directly by the object.</li>
+</ul>
+
+<h2 id="Azday_n_tufɣa">Azday n tufɣa</h2>
+
+<p>During the output manipulation stage all the fragments of the primitives from the 3D space are transformed into a 2D grid of pixels that are then printed out on the screen display.</p>
+
+<p><img alt="Output merging" src="https://mdn.mozillademos.org/files/13330/mdn-games-3d-output-merging.png" style="height: 338px; width: 600px;"></p>
+
+<p>During output merging some processing is also applied to ignore information that is not needed — for example the parameters of objects that are outside of the screen or behind other objects, and thus not visible, are not calculated.</p>
+
+<ul>
+</ul>
+
+<h2 id="Tarayt">Tarayt</h2>
+
+<p>Now you know the basic theory behind 3D manipulation. If you want to move on to practice and see some demos in action, follow up with the tutorials below:</p>
+
+<ul>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Games/Techniques/3D_on_the_web/Building_up_a_basic_demo_with_Three.js">Building up a basic demo with Three.js</a></li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Games/Techniques/3D_on_the_web/Building_up_a_basic_demo_with_Babylon.js">Building up a basic demo with Babylon.js</a></li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Games/Techniques/3D_on_the_web/Building_up_a_basic_demo_with_PlayCanvas">Building up a basic demo with PlayCanvas</a></li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Games/Techniques/3D_on_the_web/Building_up_a_basic_demo_with_A-Frame">Building up a basic demo with A-Frame</a></li>
+</ul>
+
+<p>Go ahead and create some cool cutting-edge 3D experiments yourself!</p>
diff --git a/files/kab/games/techniques/3d_on_the_web/index.html b/files/kab/games/techniques/3d_on_the_web/index.html
new file mode 100644
index 0000000000..b301afb21a
--- /dev/null
+++ b/files/kab/games/techniques/3d_on_the_web/index.html
@@ -0,0 +1,117 @@
+---
+title: 3D games on the Web
+slug: Games/Techniques/3D_on_the_web
+tags:
+  - Games
+  - Graphics
+  - NeedsContent
+  - NeedsExample
+  - NeedsTranslation
+  - TopicStub
+  - WebGL
+  - WebVR
+  - three.js
+translation_of: Games/Techniques/3D_on_the_web
+---
+<div>{{GamesSidebar}}</div><p class="summary">For rich gaming experiences on the Web the weapon of choice is WebGL, which is rendered on HTML {{htmlelement("canvas")}}. WebGL is basically an OpenGL ES 2.0 for the Web — it's a JavaScript API providing tools to build rich interactive animations and of course also games. You can generate and render dynamic 3D graphics with JavaScript that is hardware accelerated.</p>
+
+<h2 id="Documentation_and_browser_support">Documentation and browser support</h2>
+
+<p>The <a href="/en-US/docs/Web/API/WebGL_API">WebGL</a> project documentation and specification is maintained by the <a href="https://www.khronos.org/">Khronos Group</a>, not the W3C as with most of the Web APIs. Support on modern browsers is very good, even on mobile, so you don't have to worry about that too much. The main browsers are all supporting WebGL and all you need to focus on is optimizing the performance on the devices you use.</p>
+
+<p>There's an ongoing effort on releasing WebGL 2.0 (based on OpenGL ES 3.0) in the near future, which will bring many improvements and will help developers build games for the modern Web using current, powerful hardware.</p>
+
+<h2 id="Explaining_basic_3D_theory">Explaining basic 3D theory</h2>
+
+<p>The basics of 3D theory centers around shapes represented in a 3D space, with a coordinate system being used to calculate their positions. See our <a href="https://developer.mozilla.org/en-US/docs/Games/Techniques/3D_on_the_web/Basic_theory">Explaining basic 3D theory</a> article for all the information you need.</p>
+
+<h2 id="Advanced_concepts">Advanced concepts</h2>
+
+<p>You can do a lot more with WebGL. There are some advanced concepts which you should dive into and learn more about — like shaders, collision detection, or the latest hot topic — virtual reality on the web.</p>
+
+<h3 id="Shaders">Shaders</h3>
+
+<p>It's worth mentioning shaders, which are a separate story on their own. Shaders use GLSL, a special OpenGL Shading Language with syntax similar to C that is executed directly by the graphics pipeline. They can be split into Vertex Shaders and Fragment Shaders (or Pixel Shaders) — the former transforms shape positions to real 3D drawing coordinates, while the latter computes rendering colors and other attributes. You should definitely check out <a href="/en-US/docs/Games/Techniques/3D_on_the_web/GLSL_Shaders">GLSL Shaders</a> article to learn more about them.</p>
+
+<h3 id="Collision_Detection">Collision Detection</h3>
+
+<p>It's hard to imagine a game without the collision detection — we always need to work out when something is hitting something else. We have information available for your to learn from:</p>
+
+<ul>
+ <li><a href="/en-US/docs/Games/Techniques/2D_collision_detection">2D collision detection</a></li>
+ <li><a href="/en-US/docs/Games/Techniques/3D_collision_detection">3D collision detection</a></li>
+</ul>
+
+<h3 id="WebVR">WebVR</h3>
+
+<p>The concept of virtual reality is not new, but it's storming onto the web thanks to hardware advancements such as the <a href="https://www.oculus.com/en-us/rift/">Oculus Rift</a>, and the (currently experimental) <a href="/en-US/docs/Web/API/WebVR_API">WebVR API</a> for capturing information form VR hardware and making it available for use in JavaScript applications. For more, read <a href="/en-US/docs/Games/Techniques/3D_on_the_web/WebVR">WebVR — Virtual Reality for the Web</a>.</p>
+
+<p>There's also the <a href="/en-US/docs/Games/Techniques/3D_on_the_web/Building_up_a_basic_demo_with_A-Frame">Building up a basic demo with A-Frame</a> article showing you how easy it is to build 3D environments for virtual reality using the <a href="http://aframe.io/">A-Frame</a> framework.</p>
+
+<h2 id="The_rise_of_libraries_and_frameworks">The rise of libraries and frameworks</h2>
+
+<p>Coding raw WebGL is fairly complex, but you'll want to get to grips with it in the long run, as your projects get more advanced (see our <a href="/en-US/docs/Web/API/WebGL_API">WebGL documentation</a> to get started.) For real world projects you'll probably also make use of a framework to speed up development and help you manage the project you're working on. Using a framework for 3D games also helps optimize the performance as a lot is taken care of by the tools you use, so you can focus on building the game itself.</p>
+
+<p>The most popular JavaScript 3D library is <a href="http://threejs.org/">Three.js</a>, a multi-purpose tool that makes common 3D techniques simpler to implement. There are other popular game development libraries and frameworks worth checking too; <a href="https://aframe.io">A-Frame</a>, <a href="https://playcanvas.com/">PlayCanvas</a> and <a href="http://www.babylonjs.com/">Babylon.js</a> are among the most recognizable ones with rich documentation, online editors and active communities.</p>
+
+<h3 id="Building_up_a_basic_demo_with_Three.js">Building up a basic demo with Three.js</h3>
+
+<p>Three.js, as any other library, gives you a huge advantage: instead of writing hundreds of lines of WebGL code to build anything interesting you can use built-in helper functions to do it a lot easier and faster. See the <a href="https://developer.mozilla.org/en-US/docs/Games/Techniques/3D_on_the_web/Building_up_a_basic_demo_with_Three.js">Building up a basic demo with Three.js</a> subpage for the step-by-step process of creating the demo.</p>
+
+<h3 id="Building_up_a_basic_demo_with_A-Frame">Building up a basic demo with A-Frame</h3>
+
+<p>A-Frame is a web framework for building 3D and VR experiences. Under the hood, it is a three.js framework with a declarative entity-component pattern, meaning we can build scenes with just HTML. See the <a href="/en-US/docs/Games/Techniques/3D_on_the_web/Building_up_a_basic_demo_with_A-Frame">Building up a basic demo with A-Frame</a> subpage for the step-by-step process of creating the demo.</p>
+
+<h3 id="Building_up_a_basic_demo_with_Whitestorm.js">Building up a basic demo with Whitestorm.js</h3>
+
+<p>Whitestorm.js is a framework built on the top of <a href="https://developer.mozilla.org/en-US/docs/Games/Techniques/3D_on_the_web/Building_up_a_basic_demo_with_Three.js">Three.js</a> technology. It's main distinction is existance of built-in Physics engine and Plugin system based on <a href="http://npmjs.com/">NPM</a>. See <a href="https://developer.mozilla.org/en-US/docs/Games/Techniques/3D_on_the_web/Building_up_a_basic_demo_with_Whitestorm.js">Building up a basic demo with Whitestorm.js</a> for further reading, tutorials and examples of making basic and even complex apps or games using this framework in pair with Three.js.</p>
+
+<h3 id="Building_up_a_basic_demo_with_PlayCanvas">Building up a basic demo with PlayCanvas</h3>
+
+<p>PlayCanvas is a popular 3D WebGL game engine open sourced on GitHub, with an editor available online and good documentation. See the <a href="/en-US/docs/Games/Techniques/3D_on_the_web/Building_up_a_basic_demo_with_PlayCanvas">Building up a basic demo with PlayCanvas</a> subpage for high level details, and further articles showing how to create demos using the PlayCanvas library, and the online editor.</p>
+
+<h3 id="Building_up_a_basic_demo_with_Babylon.js">Building up a basic demo with Babylon.js</h3>
+
+<p><span class="seosummary">Babylon.js is one of the most popular 3D game engines used by developers. As with any other 3D library it provides built-in functions to help you implement common 3D functionality more quickly. See the <a href="/en-US/docs/Games/Techniques/3D_on_the_web/Building_up_a_basic_demo_with_Babylon.js">Building up a basic demo with Babylon.js</a> subpage for the basics of using Babylon.js, including setting up a development environment, structuring the necessary HTML, and writing the JavaScript code.</span></p>
+
+<h3 id="Other_tools">Other tools</h3>
+
+<p>Both <a href="http://unity3d.com/">Unity</a> and <a href="https://www.unrealengine.com/">Unreal</a> can export your game to <a href="/en-US/docs/Web/API/WebGL_API">WebGL</a> with <a href="/en-US/docs/Games/Tools/asm.js">asm.js</a>, so you're free to use their tools and techniques to build games that will be exported to the web.</p>
+
+<p><img alt="" src="http://end3r.github.io/MDN-Games-3D/A-Frame/img/shapes.png" style="border-style: solid; border-width: 1px; display: block; margin: 0px auto;"></p>
+
+<h2 id="Where_to_go_next">Where to go next</h2>
+
+<p>With this article we just scratched the surface of what's possible with currently available technologies. You can build immersive, beautiful and fast 3D games on the Web using WebGL, and the libraries and frameworks build on top of it.</p>
+
+<h3 id="Source_code">Source code</h3>
+
+<p>You can find all the source code for this series <a href="http://end3r.github.io/MDN-Games-3D/">demos on GitHub</a>.</p>
+
+<h3 id="APIs">APIs</h3>
+
+<ul>
+ <li><a href="/en-US/docs/Web/API/Canvas_API">Canvas API</a></li>
+ <li><a href="/en-US/docs/Web/API/WebGL_API">WebGL API</a></li>
+ <li><a href="/en-US/docs/Web/API/WebVR_API">WebVR API</a></li>
+</ul>
+
+<h3 id="Frameworks">Frameworks</h3>
+
+<ul>
+ <li><a href="http://threejs.org/">Three.js</a></li>
+ <li><a href="http://whitestormjs.xyz/">Whitestorm.js</a> (based on Three.js)</li>
+ <li><a href="https://playcanvas.com/">PlayCanvas</a></li>
+ <li><a href="http://www.babylonjs.com/">Babylon.js</a></li>
+ <li><a href="http://aframe.io/">A-Frame</a></li>
+</ul>
+
+<h3 id="Tutorials">Tutorials</h3>
+
+<ul>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Games/Techniques/3D_on_the_web/Building_up_a_basic_demo_with_Three.js">Building up a basic demo with Three.js</a></li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Games/Techniques/3D_on_the_web/Building_up_a_basic_demo_with_Whitestorm.js">Building up a basic demo with Whitestorm.js</a></li>
+ <li><a href="/en-US/docs/Games/Techniques/3D_on_the_web/Building_up_a_basic_demo_with_PlayCanvas">Building up a basic demo with PlayCanvas</a></li>
+ <li><a href="/en-US/docs/Games/Techniques/3D_on_the_web/Building_up_a_basic_demo_with_Babylon.js">Building up a basic demo with Babylon.js</a></li>
+ <li><a href="/en-US/docs/Games/Techniques/3D_on_the_web/Building_up_a_basic_demo_with_A-Frame">Building up a basic demo with A-Frame</a></li>
+</ul>
diff --git a/files/kab/games/techniques/index.html b/files/kab/games/techniques/index.html
new file mode 100644
index 0000000000..66edeebd82
--- /dev/null
+++ b/files/kab/games/techniques/index.html
@@ -0,0 +1,32 @@
+---
+title: Techniques for game development
+slug: Games/Techniques
+tags:
+  - Games
+  - Guide
+  - NeedsTranslation
+  - TopicStub
+translation_of: Games/Techniques
+---
+<div>{{GamesSidebar}}</div><div>{{IncludeSubnav("/en-US/docs/Games")}}</div>
+
+<div class="summary">
+<p><span class="seoSummary">This page lists essential core techniques for anyone wanting to develop games using open web technologies.</span></p>
+</div>
+
+<dl>
+ <dt><a href="/en-US/docs/Games/Techniques/Async_scripts">Using async scripts for asm.js</a></dt>
+ <dd>Especially when creating medium to large-sized games, async scripts are an essential technique to take advantage of, so that your game's JavaScript can be compiled off the main thread and be cached for future game running, resulting in a significant performance improvement for your users. This article explains how.</dd>
+ <dt><a href="/en-US/docs/Apps/Developing/Optimizing_startup_performance" title="/en-US/docs/Apps/Developing/Optimizing_startup_performance">Optimizing startup performance</a></dt>
+ <dd>How to make sure your game starts up quickly, smoothly, and without appearing to lock up the user's browser or device.</dd>
+ <dt><a href="/en-US/docs/Games/WebRTC_data_channels" title="/en-US/docs/Games/WebRTC_data_channels">Using WebRTC peer-to-peer data channels</a></dt>
+ <dd>In addition to providing support for audio and video communication, WebRTC lets you set up peer-to-peer data channels to exchange text or binary data actively between your players. This article explains what this can do for you, and shows how to use libraries that make this easy.</dd>
+ <dt><a href="/en-US/docs/Games/Techniques/Efficient_animation_for_web_games">Efficient animation for web games</a></dt>
+ <dd>This article covers techniques and advice for creating efficient animation for web games, with a slant towards supporting lower end devices such as mobile phones. We touch on CSS transitions and CSS animations, and JavaScript loops involving {{ domxref("window.requestAnimationFrame") }}.</dd>
+ <dt><a href="/en-US/docs/Games/Techniques/Audio_for_Web_Games">Audio for Web Games</a></dt>
+ <dd>Audio is an important part of any game — it adds feedback and atmosphere. Web-based audio is maturing fast, but there are still many browser differences to negotiate. This article provides a detailed guide to implementing audio for web games, looking at what works currently across as wide a range of platforms as possible.</dd>
+ <dt><a href="/en-US/docs/Games/Techniques/2D_collision_detection">2D collision detection</a></dt>
+ <dd>A concise introduction to collision detection in 2D games.</dd>
+ <dt><a href="/en-US/docs/Games/Techniques/Tilemaps">Tilemaps</a></dt>
+ <dd>Tiles are a very popular technique in 2D games for building the game world. These articles provide an introduction to tilemaps and how to implement them with the Canvas API.</dd>
+</dl>
diff --git a/files/kab/games/tools/engines_and_tools/index.html b/files/kab/games/tools/engines_and_tools/index.html
new file mode 100644
index 0000000000..1538446ceb
--- /dev/null
+++ b/files/kab/games/tools/engines_and_tools/index.html
@@ -0,0 +1,66 @@
+---
+title: Imsaddayen ed ifecka n wurar
+slug: Games/Tools/Engines_and_tools
+translation_of: Games/Tools/Engines_and_tools
+---
+<div>{{GamesSidebar}}</div><div>{{IncludeSubnav("/en-US/docs/Games")}}</div>
+
+<h2 id="HTML5_amsadday_n_wurar">HTML5 amsadday n wurar</h2>
+
+<p>The following are game engines implemented with HTML5 and JavaScript:</p>
+
+<ul>
+ <li><a href="https://aframe.io">A-Frame</a>: A web framework for building 3D and VR experiences. With HTML and the Entity-Component ecosystem. Works across HTC Vive, Oculus Rift, desktop, and mobile platforms. From the Mozilla VR team.</li>
+ <li><a class="external" href="http://www.canvace.com/">Canvace</a>: An HTML5 game platform for creating 2D and 2.5D games.</li>
+ <li><a class="external" href="http://craftyjs.com/">Crafty</a>: A 2D JavaScript–based game framework.</li>
+ <li><a class="external" href="http://cocos2d-x.org/wiki/Cocos2d-js">Cocos2D JS</a>: Provides a consistent development experience for whichever platform you want to distribute to, web or native. "Code once, run everywhere" is incredibly easy and natural in Cocos2D JS. With one single JavaScript code base you can run your game in web browsers and on native platforms including Mac OS X, Windows, iOS and Android. Your game can be published on all major app stores as well as other distribution channels.</li>
+ <li><a class="external" href="http://www.scirra.com/">Construct 2</a>: One of the first WebGL–enabled HTML5 game engines, it exports purely to HTML5 and JavaScript. Uses Canvas only and is extensible via JavaScript plugins.</li>
+ <li><a class="external" href="http://www.divgo.net/">Div GO</a>: A development engine for 2D and 3D games, based on the <a href="http://divstudiogames.blogspot.co.uk/p/div-games-studio-little-history.html">Div Games Studio</a>. It includes new functions and variables to enhance vanilla HTML5 and canvas. Div GO also features an integrated development environment with code editor, list of processes and functions, graphics editor, list of running processes, compiler, and generator / packer projects.</li>
+ <li><a class="external" href="http://enchantjs.com/">EnchantJS</a>: A simple JavaScript framework for creating 2D and 3D HTML5 games. It has good documentation and easy–to–follow tutorials for getting started.</li>
+ <li><a class="external" href="http://www.compilgames.net">GDevelop</a>: A game development platform that exports to native and HTML5. It uses <a href="http://www.pixijs.com/">Pixi.js</a> to render projects as WebGL / canvas.</li>
+ <li><a class="external" href="http://www.isogenicengine.com/">Isogenic Engine</a>: One of the most promising game engines out there today. It has massively multiplayer networking built in, uses Node.js and MongoDB on the server-side, and can output canvas or DOM–based graphics.</li>
+ <li><a class="external" href="http://impactjs.com/">Impact</a>: A JavaScript game engine that comes with editors and other tools, produces a wide variety of game styles (e.g. 2D and 3D), and can publish to web, Android and iOS.</li>
+ <li><a href="http://jawa.games">Jawa</a> : A browser based point'n'click adventure game engine, with a built-in very easy to use authoring tool. Games are exportable as HTML5 objects. Free for personal and educational purposes</li>
+ <li><a class="external" href="http://melonjs.org/">melonJS</a>: A fresh and lightweight 2D sprite–based engine with WebGL and Tiled map support.</li>
+ <li><a class="external" href="http://mightyfingers.com/">MightyEngine</a>: 2D game engine supporting Web, Android, and iOS platforms. It includes a built in editor to manage projects, assets, and maps.</li>
+ <li><a class="external" href="http://phaser.io">Phaser</a>: A 2D game engine supporting Web, Android, and IOS platforms.</li>
+ <li><a class="external" href="http://playcanvas.com/">PlayCanvas</a>: A collaborative, cloud–hosted game engine with a visual editor, in-browser code editing and one–click publishing.</li>
+ <li><a class="external" href="http://piqnt.com/stage.js/">Stage.js</a>: A Lightweight and fast HTML5 2D rendering engine for cross-platform game development.</li>
+ <li><a class="external" href="http://superpowers-html5.com/index.en.html">Superpowers</a>: A 2D and 3D collaborative, open-source, HTML5 game dev environment using TypeScript.</li>
+ <li><a class="external" href="http://www.wimi5.com">WiMi5</a>: An online framework to create, publish and monetize HTML5 games. It includes a visual scripting editor so programming is not required. One-click publishing for several Web Market Places. You can also download your game as a zip and publish it where ever you want, including native desktop and mobile platforms. Easy in-app purchases integration. </li>
+ <li><a class="external" href="http://www.rpgmakerweb.com/products/programs/rpg-maker-mv">RPG Maker MV: </a>This particular version from the "RPG Maker" series is built on JavaScript. You can add custom code or addons, and deploy projects as Windows, Mac and web application. In addition, anime and manga–style models are included to make use of.</li>
+ <li><a href="https://bitbucket.org/nikola_l/visual-js/">visual-js</a>: This is JavaScript game engine canvas 2d (native js) / 3d( three.js) . Server part works on node.js. Windows users can use GUI editor (game instance creator) with gui tools (encript , multilanguage , build engine library , build resourse). Try <a href="https://jsfiddle.net/user/zlatnaspirala/fiddles/">Api examples on jsfiddle</a>. You can create game objects direct on web page (editor mode). Build images resource object with node.js tool. Any app created in this game engine works on all modern browsers. </li>
+</ul>
+
+<h2 id="HTML5_amsadday_d_ifecka">HTML5 amsadday d ifecka</h2>
+
+<ul>
+ <li><a class="external" href="http://clay.io/development-tools">Clay.io</a>: Distribution, Retention, Social and Monetization tools. Easy integration of user accounts, high scores, achievements, cross promotion, in-game payments, analytics etc.</li>
+ <li><a class="external" href="https://github.com/mrdoob/stats.js">stat.js</a>: Simple JavaScript performance monitor.</li>
+ <li><a href="http://phasereditor.boniatillo.com">Phaser Editor</a>: an IDE to build Phaser based games. Provides several built-in tools like a scene builder, texture packer, asset manager and an improved JavaScript editor.</li>
+</ul>
+
+<h2 id="Tatiknulujit_i_wulmen">Tatiknulujit i wulmen</h2>
+
+<p>The following can be useful when developing games based on Web technologies.</p>
+
+<ul>
+ <li><a href="/en-US/docs/Web/HTML/Element/canvas">Canvas</a>: 2D graphics.</li>
+ <li><a href="/en-US/docs/Web/WebGL">WebGL</a>: 3D graphics.</li>
+ <li>Audio: {{htmlelement("audio")}} element, <a href="/en-US/docs/Web_Audio_API">Web Audio API.</a></li>
+ <li><a href="/en-US/docs/WebSockets">WebSockets</a>: Can be used for real-time communication between a player and the game server, to support multi-player games.</li>
+ <li><a class="external" href="http://nodejs.org/">Node.js</a>: Node is often used as a multiplayer game server, controlling the logic and handling the WebSockets connections to the players. It can be used for player authentication and the storage of data so gameplay can persist over multiple game sessions. This is all made relatively easy with great third-party modules, like Socket.IO for WebSockets, and others that handle Redis and MongoDB for storage.</li>
+ <li><a href="/en-US/docs/Web/Guide/DOM/Storage">DOM Storage</a>: Great for storing data locally on the player's device. This way you can cache game data and allow the game to continue where the player left off.</li>
+ <li><a href="/en-US/docs/Web/Guide/DOM/Using_full_screen_mode">Full Screen API</a> : Allows you to expand any HTML element to fill the user's screen, even if the browser isn’t running full-screen itself.</li>
+ <li><a href="/en-US/docs/Web/API/ServiceWorker_API">ServiceWorker API</a>: Traditionally one of the main differences between Web apps and native apps was that unlike web apps, native apps could be run offline. This has changed — technologies such as Service Workers allow for a website or web app to cache necessary assets so it can still run while offline. This includes things like JavaScript files, CSS and images. Combining this technique with intelligent use of things like localStorage will allow your game to continue working even if the Internet connection goes down. You just need to sync up all the changes when it gets connected again.</li>
+ <li><a href="/en-US/docs/API/Gamepad/Using_Gamepad_API">Gamepad API</a>: Allows you to control web–based games via a gamepad. This might be just what finally justifies HTML5 gaming on a TV or console. Who wants to use a keyboard and mouse while sitting on the sofa?</li>
+ <li><a href="/en-US/docs/WebAPI/Pointer_Lock">Pointer Lock API</a>: An attempt to improve the mouse as an input device, in situations such as games and 3D visualizations where the mouse position rotates or moves you around a 3D space. As it stands, there would still be a cursor moving around the screen causing all sorts of trouble when you want to click on something in your game. With this API, you can lock your mouse position, or even hide it altogether, using the mouse movement to move the game world instead.</li>
+</ul>
+
+<div class="note">
+<p><strong>Note</strong>: Not every browser supports every part of HTML5. For example, Canvas isn’t supported out of the box by any Internet Explorer version below 9. However, you can use Explorer Canvas to replicate canvas functionality (but that is not ideal and does not perform as well). WebSockets is supported by IE only in IE 10, and it isn’t supported in the stock browser of Android. But again, you can fake this by using Flash for the sockets, such as with Socket.IO. While supported in the latest versions of every other browser, WebGL in Internet Explorer requires at least version 11.</p>
+</div>
+
+<h2 id="Tamudemt_n_wurar">Tamudemt n wurar</h2>
+
+<p>You can use the <a href="https://github.com/mozilla/mortar-game-stub">Mortar Game Stub</a> template to get a quick start on an HTML5 game, or you can use it to get ideas on best practices.</p>
diff --git a/files/kab/games/tools/index.html b/files/kab/games/tools/index.html
new file mode 100644
index 0000000000..1d026dae28
--- /dev/null
+++ b/files/kab/games/tools/index.html
@@ -0,0 +1,40 @@
+---
+title: Tools for game development
+slug: Games/Tools
+tags:
+  - Games
+  - Gecko
+  - Guide
+  - JavaScript
+  - NeedsTranslation
+  - TopicStub
+translation_of: Games/Tools
+---
+<div>{{GamesSidebar}}</div><div>{{IncludeSubnav("/en-US/docs/Games")}}</div>
+
+<div class="summary">
+<p><span class="seoSummary">On this page you can find links to our game development tools articles, which eventually aims to cover frameworks, compilers, and debugging tools.</span></p>
+</div>
+
+<dl>
+ <dt><a href="/en-US/docs/Games/Tools/asm.js">asm.js</a></dt>
+ <dd>asm.js is a very limited subset of the JavaScript language, which can be greatly optimized and run in an ahead-of-time (AOT) compiling engine for much faster performance than your typical JavaScript performance. This is, of course, great for games.</dd>
+ <dt><a href="https://github.com/kripken/emscripten/wiki" title="https://github.com/kripken/emscripten/wiki">Emscripten</a></dt>
+ <dd>
+ <p>An LLVM to JavaScript compiler; with Emscripten, you can compile C++ and other languages that can compile to LLVM bytecode into high-performance JavaScript. This is a great tool for porting applications to the Web! There is a <a href="https://github.com/kripken/emscripten/wiki/Tutorial">useful Emscripten tutorial</a> available on the wiki. Note that we are <a href="/en-US/docs/Emscripten">aiming to cover Emscripten in its own section of MDN</a>.</p>
+ </dd>
+ <dt><a href="https://addons.mozilla.org/en-us/firefox/addon/gecko-profiler/" title="https://addons.mozilla.org/en-us/firefox/addon/gecko-profiler/">Gecko profiler</a></dt>
+ <dd>The Gecko profiler extension lets you profile your code to help figure out where your performance issues are so that you can make your game run at top speed.</dd>
+ <dt><a href="/en-US/docs/Games/Tools/Engines_and_tools">Game engines and tools</a></dt>
+ <dd>A list of engines, templates and technologies useful to game developers.</dd>
+ <dt><a href="/en-US/docs/Mozilla/Projects/Shumway">Shumway</a></dt>
+ <dd>Shumway is a renderer for Adobe Flash built entirely in JavaScript, WebGL, etc., bridging the gap between Flash and web standards. This article shows how to make use of Shumway, and how to contribute fixes and bugs to the project.</dd>
+ <dt>Toolchain for developing and debugging games</dt>
+ <dd>How does this differ from normal web app debugging? What specialist tools are available? A lot of this is going to be covered by Will in <a href="/en-US/docs/Tools">tools</a>, but here we should provide a kind of practical toolchain tutorial for debugging games, with links to Will's stuff:
+ <ul>
+  <li>Basic tools overview</li>
+  <li><a href="/en-US/docs/Tools/Shader_Editor">Shader editor</a></li>
+  <li>Performance tools (still in production, estimated early 2014)</li>
+ </ul>
+ </dd>
+</dl>
diff --git a/files/kab/games/tutorials/2d_breakout_game_phaser/index.html b/files/kab/games/tutorials/2d_breakout_game_phaser/index.html
new file mode 100644
index 0000000000..30314e4c91
--- /dev/null
+++ b/files/kab/games/tutorials/2d_breakout_game_phaser/index.html
@@ -0,0 +1,53 @@
+---
+title: 2D  Breakout urar iseqdacen Phaser
+slug: Games/Tutorials/2D_breakout_game_Phaser
+translation_of: Games/Tutorials/2D_breakout_game_Phaser
+---
+<div>{{GamesSidebar}}</div><div>{{IncludeSubnav("/en-US/docs/Games")}}</div>
+
+<p>{{Next("Games/Workflows/2D_Breakout_game_Phaser/Initialize_the_framework")}}</p>
+
+<p class="summary">Deg almeẓdan agi ciṭ ciṭ ad nesnulfu urar umafus MDN afrari yettwarun s JavaScript,s useqdec n  framework<a href="http://phaser.io/"> Phaser</a>.</p>
+
+<p>Every step has editable, live samples available to play with so you can see what the intermediate stages should look like. You will learn the basics of using the Phaser framework to implement fundamental game mechanics like rendering and moving images, collision detection, control machanisms, framework-specific helper functions, animations and tweens, and winning and losing states.</p>
+
+<p>To get the most out of this series of articles you should already have basic to intermediate <a href="/en-US/Learn/Getting_started_with_the_web/JavaScript_basics">JavaScript</a> knowledge. After working through this tutorial you should be able to build your own simple Web games with Phaser.</p>
+
+<p><img alt="Gameplay screen from the game MDN Breakout created with Phaser where you can use your paddle to bounce the ball and destroy the brick field, with keeping the points and lives." src="https://mdn.mozillademos.org/files/11323/mdn-breakout-phaser.png" style="display: block; height: 320px; margin: 0px auto; width: 480px;"></p>
+
+<h2 id="Abruy_n_tamsirt">Abruy n tamsirt</h2>
+
+<p>Meṛṛa timsirin-ed yal alqem n <a href="https://end3r.github.io/Gamedev-Phaser-Content-Kit/demos/lesson16.html">urar MDN Breakout</a> i nesallay akken-<a href="/kab/docs/"> ttunamalen </a><a href="https://end3r.github.io/Gamedev-Phaser-Content-Kit/demos/">deg Github</a></p>
+
+<ol>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Games/Workflows/2D_Breakout_game_Phaser/Initialize_the_framework">Initialize the framework</a></li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Games/Workflows/2D_Breakout_game_Phaser/Scaling">Scaling</a></li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Games/Workflows/2D_Breakout_game_Phaser/Load_the_assets_and_print_them_on_screen">Load the assets and print them on screen</a></li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Games/Workflows/2D_Breakout_game_Phaser/Move_the_ball">Move the ball</a></li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Games/Workflows/2D_Breakout_game_Phaser/Physics">Physics</a></li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Games/Workflows/2D_Breakout_game_Phaser/Bounce_off_the_walls">Bounce off the walls</a></li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Games/Workflows/2D_Breakout_game_Phaser/Player_paddle_and_controls">Player paddle and controls</a></li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Games/Workflows/2D_Breakout_game_Phaser/Game_over">Game over</a></li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Games/Workflows/2D_Breakout_game_Phaser/Build_the_brick_field">Build the brick field</a></li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Games/Workflows/2D_Breakout_game_Phaser/Collision_detection">Collision detection</a></li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Games/Workflows/2D_Breakout_game_Phaser/The_score">The score</a></li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Games/Workflows/2D_Breakout_game_Phaser/Win_the_game">Win the game</a></li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Games/Workflows/2D_Breakout_game_Phaser/Extra_lives">Extra lives</a></li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Games/Workflows/2D_Breakout_game_Phaser/Animations_and_tweens">Animations and tweens</a></li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Games/Workflows/2D_Breakout_game_Phaser/Buttons">Buttons</a></li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Games/Workflows/2D_Breakout_game_Phaser/Randomizing_gameplay">Randomizing gameplay</a></li>
+</ol>
+
+<p>As a note on learning paths — starting with pure JavaScript is the best way to get a solid knowledge of web game development. If you are not already familiar with pure JavaScript game development, we'd suggest that you first work through this series' counterpart, <a href="/en-US/docs/Games/Workflows/2D_Breakout_game_pure_JavaScript">2D breakout game using pure JavaScript</a>.</p>
+
+<p>After that, you can pick any framework you like and use it for your projects; we've chosen Phaser as it is a good solid framework, with a good support and community available, and a good set of plugins. Frameworks speed up development time and help take care of the boring parts, allowing you to concentrate on the fun stuff. However, frameworks are not always perfect, so if something unexpected happens or you want to write some functionality that the framework doesn't provide, you'll need some pure JavaScript knowledge.</p>
+
+<div class="note">
+<p><strong>Note</strong>: This series of articles can be used as material for hands-on game development workshops. You can also make use of the <a href="https://github.com/end3r/Gamedev-Phaser-Content-Kit">Gamedev Phaser Content Kit</a> based on this tutorial if you want to give a talk about game development with Phaser.</p>
+</div>
+
+<h2 id="Next_steps">Next steps</h2>
+
+<p>Ok, let's get started! Head to the first part of the series — <a href="/en-US/docs/Games/Workflows/2D_Breakout_game_Phaser/Initialize_the_framework">Initialize the framework</a>.</p>
+
+<p>{{Next("Games/Workflows/2D_Breakout_game_Phaser/Initialize_the_framework")}}</p>
diff --git a/files/kab/games/tutorials/index.html b/files/kab/games/tutorials/index.html
new file mode 100644
index 0000000000..90d1cb0790
--- /dev/null
+++ b/files/kab/games/tutorials/index.html
@@ -0,0 +1,27 @@
+---
+title: Tutorials
+slug: Games/Tutorials
+tags:
+  - Canvas
+  - Games
+  - JavaScript
+  - NeedsTranslation
+  - TopicStub
+  - Web
+  - Workflows
+translation_of: Games/Tutorials
+---
+<div>{{GamesSidebar}}</div><div>{{IncludeSubnav("/en-US/docs/Games")}}</div>
+
+<p>This page contains multiple tutorial series that highlight different workflows for effectively creating different types of web games.</p>
+
+<dl>
+ <dt><a href="/en-US/docs/Games/Workflows/2D_Breakout_game_pure_JavaScript">2D breakout game using pure JavaScript</a></dt>
+ <dd>In this step-by-step tutorial you'll implement a simple breakout clone using pure JavaScript. Along the way you will learn the basics of using the {{htmlelement("canvas")}} element to implement fundamental game mechanics like rendering and moving images, collision detection, control machanisms, and winning and losing states.</dd>
+ <dt><a href="/en-US/docs/Games/Workflows/2D_breakout_game_Phaser">2D breakout game using Phaser</a></dt>
+ <dd>In this step-by-step tutorial you'll implement the same breakout clone as the previous tutorial series, except that this time you'll do it using the<a class="external external-icon" href="http://phaser.io/">Phaser</a> HTML5 game framework. This idea here is to teach some of the fundamentals (and advantages) of working with frameworks, along with fundamental game mechanics.</dd>
+ <dt><a href="https://developer.mozilla.org/en-US/docs/Games/Workflows/HTML5_Gamedev_Phaser_Device_Orientation">2D maze game with device orientation</a></dt>
+ <dd>This tutorial shows how to create a 2D maze game using HTML5, incorporating fundamentals such as collision detection and sprite placement on a {{htmlelement("canvas")}}. This is a mobile game that uses the <a href="/en-US/Apps/Build/gather_and_modify_data/responding_to_device_orientation_changes">Device Orientation</a> and <a href="/en-US/docs/Web/Guide/API/Vibration">Vibration</a><strong> APIs</strong> to enhance the gameplay and is built using the <a href="http://phaser.io/">Phaser</a> framework.</dd>
+ <dt><a href="https://mozdevs.github.io/html5-games-workshop/en/guides/platformer/start-here/">2D platform game with Phaser</a></dt>
+ <dd>This tutorial series shows how to create a simple platform game using <a href="http://phaser.io/">Phaser</a>, covering fundamentals such as sprites, collisions, physics, collectables, and more.</dd>
+</dl>