Zarábaj až 6 000 € mesačne! Akreditované rekvalifikačné kurzy od 0 €. Viac informácií.

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

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.git­hub.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 podmienkami

Stiahnuté 454x (6.31 kB)

 

Predchádzajúci článok
Späť a Vpred
Všetky články v sekcii
Vytvor si vlastné 3D webovú hru
Preskočiť článok
(neodporúčame)
Užívateľské rozhranie
Článok pre vás napísal Pavol Hejný
Avatar
Užívateľské hodnotenie:
Ešte nikto nehodnotil, buď prvý!
/^(web )?(app )?developer$/
Aktivity