cook1470 @ CG

Name

cook1470

Email

[email protected]

Link

OPEN

OPEN

# 酷可的同人作品集此專案開放查閱原始碼，供大家交流、學習。（請至最新版本）個人創了一個**第三方** Discord 嘎母討論區，歡迎加入交流，討論專案、計畫等，或是來找人合作喔～ **<a href="https://discord.gg/hZKQzRfPJM" class="mat-raised-button mat-primary">Discord 伺服器</a>** <iframe src="https://discord.com/widget?id=840273823558664202&theme=dark" width="350" height="500" allowtransparency="true" frameborder="0" sandbox="allow-popups allow-popups-to-escape-sandbox allow-same-origin allow-scripts"></iframe> ## 皇家騎士團 ### 納德遺址 - 製作進度( 1 / ? ) 納德高原 - 位於較北方的大陸內，鮮少有人踏足，似乎是個充滿未知遺址的地方。附近有一座納德村莊，因村裡的村民某次意外在附近發現稀有的遺物，告知帝國後，帝國便派下了一隻勘查小隊前往調查，果不其然還有其他遺物、遺址，奇特的是這裡所有遺址都是被埋藏在地底，沒有任何一個顯露出來，看來年齡可是相當的古老，勘察隊目前的工程還不到一成，距離得知這裡的秘密還得等上一段時間了。 - 包圍 - 遺址 - 待製作... ## 特殊 ### 家園保衛戰類型：塔防盜賊又開始入侵村民的家園了，但這次村民們要開始反擊了，但是，沒有經驗的村民們，單靠自己是不夠的，還缺少了一位指揮官，而在光暈亂世闖蕩的你，經歷過了各式這樣的冒險，想必對戰的經驗一定相當豐富，為了保護村民的家園，就由你來指揮吧！經典的塔防遊戲，招募村民們，並購買武器給他們，消滅在道路上的盜賊們，獲取更多的經濟來壯大自己的守衛吧！家園一共有 20 生命值，一旦受到盜賊的入侵將會扣除，直到歸零，即保衛失敗。 - level 1 - level 2 - level 3 - level 4 - level 5 - level 6 ### 殭屍生存戰類型：殭屍、生存、合作、多人本系列每一關都會有指定波數的殭屍，殭屍會源源不絕的出生，並於畫面上方顯示當前波數，以及剩餘殭屍數量，擊殺當前波數的所有殭屍時自動開始下一波，且會進行治療。<br/> 每位玩家的分數代表金幣數量，可通過 TAB 查看，攻擊殭屍時，可以賺取殭屍受傷量的金幣，除某些特殊情況。<br/> 金幣可用於開啟新區域、購買新槍枝、裝備、升級槍枝、治療等，或是使用某些特殊的建築、機器等。<br/> 玩家按下 F 可裝備鐵撬棍，該武器不會設為預設武器，可卸下，因此玩家可同時持有兩種槍枝，並隨時切換鐵撬棍。<br/> 當玩家被殭屍擊殺時不會馬上死亡，此時只要靠近倒地的玩家即可進行救援，且倒地的玩家會被殭屍無視，而若超過時間未進行救援則會死亡，等到進入下一波時自動復活，所有玩家倒地、死亡時任務失敗。此系列並非為單人遊玩所設計，請找您的親朋好友一同遊玩，不管是您的爸爸媽媽、阿公阿嬤、哥哥姊姊、弟弟妹妹、兒子女兒、孫子孫女、損友好友都行，不建議單人遊玩！ - 小村落 ### 即時戰略遊戲玩家vs玩家，甚至是玩家vs電腦即時戰略遊戲。 - 機器兵工廠（beta） ### 無字故事類型：故事向居多沒有字的任務，運用純粹的畫面、聲音，交織出一段又一段的故事。 - 故事一 - 故事二 ### 如果改編自官方任務，如果官方任務...的話... - 如果進軍藍星灣 ### 小品遊戲各種簡單的小品遊戲，種類不拘。 - 速度拳擊 - 我們的世界 - 打靶訓練 - 迪拉克靶場 - 冰淇淋車車 - 無盡守城 - 踩地雷 - 光暈疊羅漢 - 超級AI - 垃圾桶射擊訓練 ### 雙人遊戲這裡會放置一些雙人遊玩的任務，包括一些破壞友情的，或是雙人合作的。 - 四子棋 ### 多人遊戲各種簡單的多人遊戲，種類不拘。 - 聖誕狂歡派對（Christmas Bash Party） ### 菁英、魔王戰這裡會用來放一些菁英怪、BOSS。 - 『BOSS戰』忍者 - 『BOSS戰』滅世機甲 ### 對戰片段、動畫這裡會用來放一些，曾經製作過的 BOSS ，放在一起的對戰情況，或是以後有可能出對戰動畫(? - 忍者 vs 忍者 - 宇智波止水、宇智波鼬聯合技 ### 小工具用來做一些神奇小東西的工具。 - 角色動畫編輯器 ## 故事任務 ### 單集劇本單集劇本的合輯，用來分類一集就結束的故事任務。 - 阿呆的大冒險

酷可的同人作品集

OPEN

OPEN

OPEN

VisualNovelGame

OPEN

# 我的視覺小說（My Visual Novel）視覺小說遊戲的範本專案，編輯事件表就可以做出自己的視覺小說遊戲了。 - [視覺小說製作教學影片](https://www.youtube.com/live/s19SacUQ0V4?si=4j4W3RXfyPj9bNrz&t=2562) <a href="https://code.gamelet.com/edit/VisualNovelGame?source=CG.VisualNovelGame/game.events" class="mat-raised-button mat-primary">點此參考範本專案</a> ### 開始設計 <a href="cg://source/CG.VisualNovelGameTemplate/game.events" class="mat-raised-button mat-primary">點此開始創造視覺小說遊戲</a> ## 如何複製這個專案？ 1. 開啟本專案。 ![開專案](https://i.imgur.com/6gkMRao.png) 2. 點擊專案代碼右側的 🍴（刀叉圖示）來複製成新的專案。 ![複製專案](https://i.imgur.com/aTfNmMJ.png) 3. 輸入你自己的專案代碼後，點摳成新專案。 ![輸入專案代碼](https://i.imgur.com/pFqUnQH.png) # 專案介紹 ![](https://i.imgur.com/dhi0NxE.png) 本專案檔案總管如上圖所示，**視覺小說遊戲的主要流程在 `game.events` 檔案內**。另外一個 **`menu.events` 為遊戲主選單**，為有需要遊戲選單的人所新增的，若你不需要遊戲主畫面，可以參考下方修改方式。 **點進 `app.ts` 檔案**，找到如下方的程式碼，根據註解說明，**將字串後方的 `menu` 改成 `game` 即可**。 ```ts /** * 修改下方 source 的路徑字串，可以改變專案運行後初次執行的事件表 * 例如改為 'CG.VisualNovelGameTemplate/game.events' 可以直接執行遊戲 */ let source = 'CG.VisualNovelGameTemplate/menu.events'; // 請嘗試將這裡的 menu 改為 game ``` 至於該如何編輯 `menu.events` 來設計自己的遊戲主畫面，可以進入該檔案的「初始化」事件，找到「建立圖層佈局」的動作查看當前畫面佈局。而對「建立圖層佈局」這個動作不熟悉的人，可以參考 **[【系統設計】CG 事件表的 UI 系統設計](https://www.youtube.com/live/BKRxSFObMlY?t=1000s)** 這個影片，簡單的介紹了如何使用該動作來建立自己的 UI 介面。 ## 教學資源 - 文章 - **[巴哈姆特 - 【教學】在網頁上做一個視覺小說遊戲](https://home.gamer.com.tw/artwork.php?sn=5866046)** - **[IT邦幫忙 - [Day 03] CG 同人陣的運作原理](https://ithelp.ithome.com.tw/articles/10321203)** - **[IT邦幫忙 - [Day 11] 在 CG 上公開自己的作品](https://ithelp.ithome.com.tw/articles/10328457)** - **[IT邦幫忙 - [Day 12] 設定專案封面、將成品發布到 Gamelet.online](https://ithelp.ithome.com.tw/articles/10328935)** - **[IT邦幫忙 - 什麼！在網頁上也可以寫視覺小說？](https://ithelp.ithome.com.tw/articles/10337454)** - 影片 - **[【遊戲設計】介紹在網頁上製作視覺小說遊戲](https://www.youtube.com/live/5AUGRityOec?t=189s)** - **[【系統設計】CG 事件表的 UI 系統設計](https://www.youtube.com/live/BKRxSFObMlY?t=1000s)** - **[【遊戲設計】視覺小說引擎更新報告！](https://www.youtube.com/live/s19SacUQ0V4?t=1092s)** - **[【教學】視覺小說引擎－迷霧特效【CC 字幕】](https://www.youtube.com/watch?v=MyXBfAL2BJQ)** - 本站討論串 - **[變數決定結局](https://code.gamelet.com/discuss/p/liaw1/issue/3698/0)** - **[分支選項設置](https://code.gamelet.com/discuss/coding/topic/3706)** ## 作者 **[cook1470](/profile/114899766849308759711@google)**

My Visual Novel

OPEN

光暈戰記：殭屍來襲 UI

OPEN

廢土伺服器村綠交易池紀錄檢視器

OPEN

# three.js three.js 是一個基於 JavaScript 的瀏覽器 3D 繪圖引擎，允許開發者在網頁上輕鬆創建和顯示 3D 場景。 ## 使用方法以下是一個簡單的範例，展示如何使用 `three.js` 創建一個基本的 3D 場景： ```ts import three = CG.ThreeJs.three; import OrbitControls = CG.ThreeJs.examples.jsm.controls.OrbitControls; function start(): void { // 初始化 three，用於自動建立場景、攝影機、渲染循環。 three.initialize(800, 600); // 建立一個軸心輔助物件，用於查看 x, y, z 的方向 const axesHelper = new THREE.AxesHelper(2); three.scene.add(axesHelper); // 添加至場景中 // 創建一個平面作為地板 const planeGeometry = new THREE.PlaneGeometry(10, 10); // 表示平面的幾何形狀 const planeMaterial = new THREE.MeshBasicMaterial({ color: 0xAAAAAA, side: THREE.DoubleSide }); // 基本紋理 const plane = new THREE.Mesh(planeGeometry, planeMaterial); plane.rotation.x = Math.PI / 2; // 平面一開始為垂直，調整 X 軸旋轉角度使其水平 three.scene.add(plane); // 將平面添加至場景中 // 創建方塊 const boxGeometry = new THREE.BoxGeometry(0.5, 0.5, 0.5); // 表示立方體的幾何形狀 const noxMaterial = new THREE.MeshBasicMaterial({ color: 0x00ff00 }); // 基本紋理 const box = new THREE.Mesh(boxGeometry, noxMaterial); box.position.y = 0.25; // 將方塊抬高 0.25，使其貼地 three.scene.add(box); // 將方塊添加至場景中 three.camera.position.set(0, 2, 5); // 調整攝影機位置 three.camera.lookAt(0, 0, 0); // 讓攝影機看向 (0, 0, 0) // 本模組初始化時會自動建立攝影機，一般需自行建立 // 新增一個控制器，可以用滑鼠來控制攝影機的視角，像是自由旋轉、平移和縮放效果。 const controls = new OrbitControls(three.camera, three.renderer.domElement); let lastFrame = Date.now(); three.beforeRender = () => { // 你可以複寫這個函數，在渲染畫面前做點事 const currentFrame = Date.now(); // 為當前幀時間 const deltaTime = currentFrame - lastFrame; // 計算自上幀以來的時間差 lastFrame = currentFrame; // 更新 lastFrame 為當前幀時間 // 如果 controls.enableDamping 或 controls.autoRotate 設為 true 則必須每次渲染畫面前更新。 controls.update(deltaTime); // 更新 OrbitControls }; } start(); ``` ## Resources - [three.js](https://threejs.org/) - 基於 JavaScript 的瀏覽器 3D 繪圖引擎。 ## Authors **[cook1470](/profile/cook1470)**

OPEN

# Dunjo 不知道你有沒有聽過一句話：「挖欸林星洗歐貝欸。」<br/> 老實說跟這款遊戲其實也沒什麼關係。這是一款 2D 橫向卷軸遊戲，<br/> 最酷的是它可以自己自製關卡，<br/> 而且還分享給別人玩！<br/> 趕快進來發揮你的創意吧～這遊戲讓我肝了三天三夜。 ## 操作方法 A、D－左右移動<br/> W－跳躍、爬樓梯<br/> S－下樓梯<br/> SPACE－互動<br/> S + SPACE－跳下平台<br/> ## 遊戲目標找到鑰匙，並通往終點的大門。<br/> ## 關卡編輯器分別有三種模式，操作、繪製、擦除。操作可以設定一些具有額外參數的物件，目前只有電腦。繪製可以在地圖上新增物件。擦除可以將物件從地圖上移除。每一關都至少需要設置玩家、鑰匙、大門，且這三者也只能設置一個。<br/> 其餘有功能性的物件為爬梯、平台、消失的方塊、金幣、火焰。<br/> 剩下的目前皆為裝飾性物品。 ## Authors **[cook1470](/profile/cook1470)** ## Asstes 字型：[Pixeloid Font](https://www.fontspace.com/pixeloid-font-f69232)<br/> 作者：[GGBotNet](https://www.fontspace.com/ggbotnet)<br/> 許可證：[SIL Open Font License, Version 1.1](https://opensource.org/license/ofl-1-1/) **** 字型：[俐方體11號／Cubic 11](https://github.com/ACh-K/Cubic-11)<br/> 作者：[ACh-K](https://github.com/ACh-K)<br/> 許可證：[SIL Open Font License, Version 1.1](https://opensource.org/license/ofl-1-1/) **** 精靈圖標題：[Dunjo Tileset & Sprites](https://arks.itch.io/dungeon-platform-tileset)<br/> 作者：[Arks💢](https://arks.itch.io/)<br/> 許可證：[CC-BY 4.0（創用CC姓名標示 4.0 國際許可協議）](https://creativecommons.org/licenses/by/4.0/)<br/> **** [All Sound Effects](https://sfxr.me/) **** 音樂標題：[Head in the Sand (seamless loop)](https://opengameart.org/content/head-in-the-sand-seamless-loop)<br/> 作者：[congusbongus](https://opengameart.org/users/congusbongus)<br/> 許可證：[CC0（知識共有宣告 - 不受版權保護）](https://creativecommons.org/publicdomain/zero/1.0/)<br/> **** 音樂標題：[Chubby Cat](https://opengameart.org/content/nintendo-style-funny-music-loop-02)<br/> 作者：[PlayOnLoop](https://opengameart.org/users/playonloop)<br/> 許可證：[CC-BY 4.0（創用CC姓名標示 4.0 國際許可協議）](https://creativecommons.org/licenses/by/4.0/)<br/> **** 其他素材：自製

OPEN

PixiGifMattKarl

OPEN

# PIXI 文字輸入框（PixiTextInput）基於 Mwni 的函式庫改編而來，這個 PIXI.js 的模組提供了一種方便的方法來將文字輸入框添加到 PIXI.js 舞台上。輸入框本身是一個 HTML \<input\> 元素，根據 PIXI.DisplayObject 給定的變換位置放置在舞台上方。方框會在 PIXI 舞台上繪製。此外，您可以選擇在文字輸入框失去焦點時，選擇是否應該用 PIXI.Text 來替代 \<input\>。 ## 我的改動 v0.0.1 1. 事先宣告 Class 的屬性變數，因為 TypeScript 在使用 `this` 賦值前，需要事先宣告屬性變數。 2. 將所有帶有 _ 前綴的屬性、函數，變成私有屬性（`private`）。 3. 修正了一個把 `_dom_visible` 誤寫成 `dom_visible` 的 BUG。 4. 添加了三個 `interface`，`TextInputOptions、TextInputStyle、TextBoxStyle`，並於部分輸入參數加上型別標註。 5. 刪除函數 `renderWebGL`、`renderCanvas`，這些函數用於支援 pixi v4，但此模組使用的 pixi 為 v5，因此不需要這些函數。 6. 讓 _surrogate.resolution 預設為 2。 7. 修正部分因 JavaScript 源碼，轉移到 TypeScript 後所出現的錯誤提示，如型別錯誤等。其餘詳見 CHANGELOG.md ## 使用範例 ```typescript import pixi = CG.Base.pixi; import TextInput = CG.PixiTextInput.TextInput; function examples() { // 初始化 pixi 舞台 pixi.initialize(600, 500); // 建立文字輸入框 const input = new TextInput({ input: { fontSize: '25pt', padding: '14px', width: '500px', color: '#26272E' }, box: { fill: 0xE8E9F3, rounded: 16, stroke: { color: 0xCBCEE0, width: 4 } } }) input.position.set(pixi.stageWidth * 0.5, pixi.stageHeight * 0.5); // 調整輸入框的位置 input.pivot.set(input.width * 0.5, input.height * 0.5); // 調整輸入框的錨點 pixi.root.addChild(input); // 將文字框添加到舞台中 const input2 = new TextInput({ input: { fontSize: '20pt', padding: '14px', width: '400', color: '#26272E' }, box: { fill: 0xFFFFFF, rounded: 16, stroke: { color: 0x333333, width: 4 } } }) input2.position.set(pixi.stageWidth * 0.5, pixi.stageHeight * 0.75); input2.pivot.set(input.width * 0.5, input.height * 0.5); pixi.root.addChild(input2); } examples(); ``` ## 屬性 **substituteText** : boolean > 當沒有焦點時，插件是否應該將 HTML 的 input 標籤替換為 pixi-Text DisplayObject。 > > 本模組盡量模仿 HTML input 元素的外觀，但是在某些字體/樣式下可能會有一些差異。 > > 將此設置為 false 以便 HTML input 元素始終可見。缺點是：你無法在輸入欄位上方顯示疊加層。 **placeholder** : string > 應用於 HTML input 元素或替代的 pixi-Text 的佔位符文字。 **placeholderColor** : int > 佔位符的顏色（當 `substituteText` 設置為 false 時無效；使用 CSS 設置佔位符顏色）。 **text** : string > HTML input 元素的文字（值）。 **maxLength** : int > 文字的最大長度。 **restrict** : RegExp | string > 限制輸入文字的字符集。可以傳遞包含所有可能字符的字符串或正則表達式，正則表達式將與整個輸入字符串匹配。 **htmlInput** : HTMLInputElement > 直接訪問原生 HTML input 元素。不知道你計劃做什麼。 **disabled** : boolean > 設置為 true 以禁用輸入。 ## 函數 **focus()** : void > 使輸入元素獲得焦點。 **select()** : void > 使輸入元素獲得焦點並選中其中的文字。 **blur()** : void > 移除輸入元素的焦點。 **setInputStyle( key：string, value：string )** : void > 更改輸入元素的 CSS 樣式屬性。例如，要更改字體大小，使用：<br/> > `input.setInputStyle('fontSize', '21px')` ## 事件所有事件都通過默認的 pixi EventEmitter 發送。 ```ts input.on('keydown', keycode => { console.log('key pressed:', keycode) }) ``` **keydown** -> keycode: number > 當按下某個鍵時連同其[鍵碼](http://keycode.info/)一起發送。 **keyup** -> keycode: number > 當釋放某個鍵時連同其[鍵碼](http://keycode.info/)一起發送。 **input** -> text: string > 當輸入文字改變時連同當前輸入的文字一起發送。 **focus** > 當輸入元素獲得焦點時發送。 **blur** > 當輸入元素失去焦點時發送。 ## Links and Resources - [pixi-text-input](https://github.com/Mwni/pixi-text-input) ## Authors **[cook1470](/profile/cook1470)**

OPEN

OPEN

OPEN

CGEventsTutorial

OPEN

OPEN

OPEN

光暈同人陣教學

OPEN

被追殺的天影武士

OPEN

ⒸCode.Gamelet.com | Privacy Policy | Terms of Service