Articles

Welcome to the first part of this series on Banana, a 2D top-down railway simulator built with React and PixiJS.

Building a complex simulation requires good debugging and performance tools. Banana ships with several built-in utilities.

The track system is the backbone of Banana. Every rail network starts with laying down tracks.

Banana features a full terrain system that adds depth and realism to the railway landscape.

Trains in Banana use a hierarchical formation system that models real-world train composition.

Once formations are assembled and placed on tracks, they need to move. Banana simulates train movement with a physics-based system.

A railway network is not complete without stations for passengers and buildings that bring the world to life.

Timetables bring order to your railway network, transforming freeform train movement into a coordinated schedule.

Smooth camera control is essential for navigating a large railway network. Banana's camera system goes beyond basic pan and zoom.

Being able to save and load your railway world is crucial. Banana has a full serialization system for persisting the entire scene.

終究還是來到了這一天，我們終於要過終點線了！

雖然 D3 本身就有提供平移跟縮放的功能，但是因為如果我沒有結合 D3 的話，好像就少了很多應用的場合！

今天的應用主要會是動畫方面的！

今天的 demo 主要會是貝茲曲線的編輯器

今天的主題是要在無限畫布上面可以用滑鼠或是手寫觸控寫字！

在今天的主題開始之前有一件事我覺得有必說明一下，應用展示都是以“展示”為主要目的，所以並不會帶太多實作的細節；主要是給大家看可以做到什麼樣的成果。

今天跟接下來的篇幅會著重在無限畫布的應用，會以展示為主要目的，所以不會帶太多實作上面的細節。

今天要講的也算是重構的一部分，但主要是渲染最佳化可以努力的方向～

今天跟明天會大概講一些重構跟最佳化方面的內容，後天就會進到應用的部分。

在進入重構跟應用之前，先讓我來替自己工商一下。

今天應該是我最後一篇直接對無限畫布新增功能的開發。

這個系列主要前半部都是在描述怎麼實作一個無限畫布，但是如果這個無限畫布只是一張空白的紙實在是沒有什麼用處啊！

今天的內容有點像是支線，所以在實際改動你的 code 之前，可以先把這篇看完再決定要不要去跟著實作！

不知不覺好像已經超過一半的篇數了！大家加油！

前幾篇我們有實作了限制整個視窗的平移功能。

今天我們要來講解觸控的縮放！

在前一篇的最後我們幾乎實作完了縮放功能，為什麼說幾乎呢？

昨天好像不小心一次噴太多內容，希望大家沒有消化不良。

在 Day 06 的時候有提到，我們在實作的 "無限畫布" 實際上並不是真的無限，而是很大很～大的畫布而已。

這個算是番外篇，因為篇幅真的很長，從主要的鐵人賽文章裡面分出來的，主要是要箝制畫布平移的功能，在比較複雜的限制下會需要計算兩個線段的交點。有些說明圖我之後會補上來，不過因為沒有實作這部分不會影響到主要的功能，所以優先程度可能就不會那麼高。

因為我需要從頭解釋這個中間的原理，所以我們才沒有先寫測試。

今天我們要接續實作平移，主要是觸控的部分。

今天要來實作無限畫布三本柱之一：平移 (pan)

今天要講解的東西是座標系的轉換(昨天有稍微提到過了)。

今天我想要先概略講解一下我們會怎麼去拆解無限畫布這個看似範圍很大的問題，把它變成一些可以模組化的東西。

前面在 Day 02 的時候有提到這個系列主要會實作移動無限畫布的功能。

我今天又要跳脫一下實作來解釋一些技術上面的抉擇。

今天起這個系列要開始實作了！啪唧啪唧啪唧

Canvas 本身是沒有「動」的概念。

canvas 是一種 HTML 的標籤，它在 flash 式微消失後成為在網頁上創作的主要手段。

簡單來說無限畫布就是一張大白紙的概念，你可以在這張白紙上面畫上你想要的任何東西在任何你想要的地方，而如果要給這張畫布的尺寸設下限制，你希望會是無限。

嗨，大家好！其實從蠻久以前就有耳聞鐵人賽，身邊也有一些朋友參加過了，本來想說去年要參加，但是計劃趕不上變化，忙著找工作腦袋就完全忘記這件事情了。xD