Vydělávej až 160.000 Kč měsíčně! Akreditované rekvalifikační kurzy s garancí práce od 0 Kč. Více informací.
Hledáme nové posily do ITnetwork týmu. Podívej se na volné pozice a přidej se do nejagilnější firmy na trhu - Více informací.

Lekce 5 - TypeScript

V minulém díle, Zpět a Vpřed, jsem ukazoval, co můžu díky stavu hry docílit.

V tomto díle ukáži, jak spojím jednotlivé soubory do jednoho kompaktního celku.

Webová hra - WebGL a BabylonJS - 3D webová hra

Nadstavby JavaScriptu

Zatím jsem všechny javascriptové soubory přidával přímo do index.html pomocí tagu nové výhody, protože musíte zvolit jeho nižší verzi a vzdát se některých jeho funkcí. Druhá velká nevýhoda psaní JS kodu přímo je ta, že vzniká velké množství souborů, které musíte ručně a značně neelegantně přidávat do souboru index.html.

Obě tyto nevýhody řeší nadstavby JS, které se do VanillaJS transpilují. Existuje mnoho nadstaveb např. CoffeeScript, Babel+Flow, já budu dále používat TypeScript.

TypeScript

Oproti běžnému JavaScriptu má TypeScript několik velkých výhod:

  • Poskytuje typovou kontrolu a tím zabraňuje potenciálním chybám.
  • Lze v něm využit všechny výhody JavaScriptu z jeho ES6 verze.
  • Pomocí importů a exportů umožňuje propojit jednotlivé soubory do uceleného projektu.

Pokud bychom hru, co máme přepsali do TypeScriptu, vypadal 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í soubory si můžeš stáhnout pod článkem.

Pro TypeScript transpilátor vyrobím konfigurační soubor tsconfig.json:

{
  "compilerOptions": {
    "module": "commonjs",
    "target": "es5",
    "sourceMap": true,
    "jsx": "react"
  }
}

create-react-app

Tyto soubory se musí převést do JavaScriptu k tomu slouží TypeScript transpilátor. Následně se soubory spojí do jednoho. Na to se obvykle používá nástroj WebPack. Je ovšem docela složité nakonfigurovat a nastavit vše tak, aby hladce fungovalo. Proto se často používají předpřipravené projekty. Vzhledem k tomu, že v dalším článku budu používat knihovnu React, použiji k výrobě předpřipraveného projektu nástroj create-react-app.

Pro spuštění tohoto nástroje potřebuji mít nainstalovaný Node.js. Když mám nainstalovaný Node nainstaluji create-react-app. Potom si otevřu příkazový řádek ve složce, kde chci projekt mít a spustím:

create-react-app web-game --scripts-version=react-scripts-ts

Tím se mi vytvoří jednoduchý předpřipravený projekt. Skládá se z několika důležitých součástí:

  • Složka src obsahuje všechny zdrojové kódy projektu, kromě souboru index.html.
  • Souboru src/index.tsx se WebPack chytí a dále ho spojuje s dalšími soubory, které má importované.
  • Složka public obsahuje vše, co není potřeba transpilovat.
  • Soubor public/index.html
  • Soubor package.json uchovává různé informace o projektu a hlavně seznam balíčků, které se v projektu využívají.
  • Složka node_modules obsahuje jednotlivé balíčky, které se instalují pomocí nástroje npm nebo Yarn. Sem se instaluje to, co je popsáno v package.json. Tato složka se necommituje do git repozitáře, protože ji lze kdykoliv vytvořit pomocí příkazu npm install nebo yarn install.

TypeScriptové soubory i s konfigurací umístím do složky src/ a do <body> v souboru index.html přidám canvas, jak jsem to udělal v "prvním článku".

Do souboru index.html už nebudu přidávat každý JavaScriptový soubor zvlášť, ale pouze jeden, který mi WebPack automaticky vytvoří spojením mých TypeScriptových souborů a nainstalovaných node_modules.

Rozdělanou hru si můžeš stáhnout pod článkem, nebo jít do Git repozitáře, kde najdeš nejnovější verzi zdrojových kódů. Nebo si ji rovnou můžeš vyzkoušet na webappgames.git­hub.io/web-game.

V dalším díle, Uživatelské rozhraní, ukáži, jak vytvořím uživatelské rozhraní pomocí Reactu a Material UI.


 

Stáhnout

Stažením následujícího souboru souhlasíš s licenčními podmínkami

Staženo 404x (6.31 kB)

 

Předchozí článek
Zpět a Vpřed
Všechny články v sekci
WebGL a BabylonJS - 3D webová hra
Přeskočit článek
(nedoporučujeme)
Uživatelské rozhraní
Článek pro vás napsal Pavol Hejný
Avatar
Uživatelské hodnocení:
3 hlasů
/^(web )?(app )?developer$/
Aktivity