C .
ODE
G
AMELET
# 酷可的同人作品集 此專案開放查閱原始碼,供大家交流、學習。(請至最新版本) 個人創了一個**第三方** 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 忍者 - 宇智波止水、宇智波鼬聯合技 ### 小工具 用來做一些神奇小東西的工具。 - 角色動畫編輯器 ## 故事任務 ### 單集劇本 單集劇本的合輯,用來分類一集就結束的故事任務。 - 阿呆的大冒險
# 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)**
# 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/> **** 其他素材:自製
# 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)**
ⒸCode.Gamelet.com | Privacy Policy | Terms of Service