5. diel - TypeScript
V minulom diele som ukazoval, čo môžem vďaka stavu hry docieliť. V tomto diele ukážem, ako spojím jednotlivé súbory do jedného kompaktného celku.
![webová hra - Vytvor si vlastné 3D webovú hru](images/9049/web-game/5-main-preview.png)
Nadstavby JavaScriptu
Zatiaľ som všetky javascriptové súbory pridával priamo do index.html pomocou tagu nové výhody, pretože musíte zvoliť jeho nižšiu verziu a vzdať sa niektorých jeho funkcií. Druhá veľká nevýhoda písanie JS kodu priamo je tá, že vzniká veľké množstvo súborov, ktoré musíte ručne a značne neelegantná pridávať do súboru index.html.
Obe tieto nenýhody rieši nadstavby JS, ktoré sa do VanillaJS transpilují. Existuje veľa nadstavieb napr. CoffeeScript, Babel + Flow, ja budem ďalej používať TypeScript.
TypeScript
Oproti bežnému JavaScriptu má TypeScript niekoľko veľkých výhod:
- Poskytuje typovú kontrolu a tým zabraňuje potenciálnym chybám.
- Možno v ňom využitý všetky výhody JavaScriptu z jeho ES6 verzie.
- Pomocou importov a exportov umožňuje prepojiť jednotlivé súbory do uceleného projektu.
Ak by sme hru, čo máme prepísali do TypeScriptu, vyzeral by index.tsx takto:
import './style/index.css'; import * as BABYLON from 'babylonjs'; import * as React from "react"; import * as ReactDOM from "react-dom"; import {createStore} from 'redux'; import createStateFromUri from './state-uri/create-state-from-uri'; import createTitleFromState from './state-uri/create-title-from-state'; import createUriFromState from './state-uri/create-uri-from-state'; import createScene from './scene/create-scene'; import updateScene from './scene/update-scene'; import {stateReducer} from './redux-reducers/state-reducer'; import {wrapReducer} from './tools/wrap-reducer'; const store = createStore(wrapReducer(stateReducer), createStateFromUri(document.location.toString())); const root = document.getElementById("root"); const canvas = document.getElementById("scene") as HTMLCanvasElement; const engine = new BABYLON.Engine(canvas, true); const scene = createScene(canvas, engine, store); engine.runRenderLoop(function () { scene.render(); }); window.addEventListener("resize", function () { engine.resize(); }); function render() { updateScene(scene, store.getState()); } store.subscribe(()=> { const state = store.getState() as any; if (state.lastAction.type !== 'CHANGE_STATE') { const uri = createUriFromState(state); const title = createTitleFromState(state); document.title = title; history.pushState({}, title, uri); } }); store.subscribe(render); render(); window.onpopstate = function () { const state = createStateFromUri(document.location.toString()); store.dispatch({type:'CHANGE_STATE',state}); };
Ostatné súbory si môžeš stiahnuť pod článkom.
Pre TypeScript transpilátor vyrobím konfiguračný súbor tsconfig.json.
{ "compilerOptions": { "module": "commonjs", "target": "es5", "sourceMap": true, "jsx": "react" } }
Create-React-app
Tieto súbory sa musia previesť do JavaScriptu k tomu slúži TypeScript transpilátor. Následne sa súbory spojí do jedného. Na to sa obvykle používa nástroj WebPack. Je však celkom zložité nakonfigurovať a nastaviť všetko tak, aby hladko fungovalo. Preto sa často používajú predpripravené projekty. Vzhľadom k tomu, že v ďalšom článku budem používať knižnicu React, použijem na výrobu predpripraveného projektu nástroj create-react-app.
Pre spustenie tohto nástroja potrebujem mať nainštalovaný Node.js. Keď mám nainštalovaný Node nainštalujem create-react-app. Potom si otvorím príkazový riadok v priečinku, kde chcem projekt mať a spustím:
create-react-app web-game --scripts-version=react-scripts-ts
Tým sa mi vytvorí jednoduchý predpripravený projekt. Skladá sa z niekoľkých dôležitých súčastí:
- Zložka src obsahuje všetky zdrojové kódy projektu, okrem súboru index.html.
- Súboru src / index.tsx sa WebPack chytí a ďalej ho spája s ďalšími súbormi, ktoré má importované.
- Zložka public obsahuje všetko, čo nie je potreba transpilovat.
- Súbor public / index.html
- Súbor package.json uchováva rôzne informácie o projekte a hlavne zoznam balíčkov, ktoré sa v projekte využívajú.
- Zložka node_modules obsahuje jednotlivé balíčky, ktoré sa inštalujú pomocou nástroja NPM alebo Yarn. Sem sa inštaluje to, čo je popísané v package.json. Táto zložka sa necommituje do git repozitára, pretože ju možno kedykoľvek vytvoriť pomocou príkazu "NPM install" alebo "priadze install".
TypeScriptové súbory is konfiguráciou umiestnim do zložky src a do
v súbore index.html pridám canvas, ako som to urobil v "prvom článku". Do súboru index.html už nebudem pridávať každý javascriptový súbor zvlášť, ale iba jeden, ktorý mi WebPack automaticky vytvorí spojením mojich TypeScriptových súborov a nainštalovaných node_modules.Rozrobenú hru si môžeš stiahnuť pod článkom, alebo ísť do Git repozitára, kde nájdeš najnovšiu verziu zdrojových kódov. Alebo si ju rovno môžeš vyskúšať na webappgames.github.io/web-game. V ďalšom diele ukážem, ako vytvorím užívateľské rozhranie pomocou React a Material UI.
Stiahnuť
Stiahnutím nasledujúceho súboru súhlasíš s licenčnými podmienkamiStiahnuté 409x (6.31 kB)