Přidej si svou IT školu do profilu a najdi spolužáky zde na síti :)

5. díl - TypeScript

JavaScript 3D webová hra TypeScript

ONEbit hosting Unicorn College Tento obsah je dostupný zdarma v rámci projektu IT lidem. Vydávání, hosting a aktualizace umožňují jeho sponzoři.

V minulém díle 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

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 nený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 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 hejny.github.io/web-game. V dalším díle ukáži, jak vytvořím uživatelské rozhraní pomocí Reactu a Material UI.


 

Stáhnout

Staženo 30x (6.31 kB)

 

 

Článek pro vás napsal Pavol Hejný
Avatar
Jak se ti líbí článek?
Ještě nikdo nehodnotil, buď první!
Autor se věnuje vývoji mnoha www aplikací - https://www.pavolhejny.com/
Miniatura
Předchozí článek
Zpět a Vpřed
Miniatura
Všechny články v sekci
Vytvoř si vlastní 3D webovou hru
Miniatura
Následující článek
Uživatelské rozhraní
Aktivity (6)

 

 

Komentáře

Děláme co je v našich silách, aby byly zdejší diskuze co nejkvalitnější. Proto do nich také mohou přispívat pouze registrovaní členové. Pro zapojení do diskuze se přihlas. Pokud ještě nemáš účet, zaregistruj se, je to zdarma.

Zatím nikdo nevložil komentář - buď první!