學完基礎的Lua語法後，今天開始製作第一個遊戲畫面了!

<html lang="en"><head><style>              .article-container {                width: 100%;                font-family: Microsoft JhengHei,Helvetica Neue,Helvetica,Arial,sans-serif;              }              ul, ol {                margin: 12px auto;                max-width: 740px;                color: #535150;                line-height: 1.8;                padding-left: 0px;              }              .graf--img {                display: table;                justify-content: center;                align-items: center;                text-align: center;                color: gray;                font-size: 14px;                letter-spacing: 0px;                margin: 10px auto 50px;                width: 100%;                position: relative;                clear: both;              }              .graf--img.center img {                width: 100%;                max-width: 740px;                margin: 10px auto 0px;                display: block;                margin: 0 auto;              }              .graf--img.full img {                width: 100%;              }              .captionTheme__wrapper {                width: 100%;                font-style: normal;                line-height: 22px;                font-size: 16px;                max-width: 600px;                margin-top: 8px;                display: inline-block;              }              .graf--img.full {                max-width: 100%;                margin: 40px 0px;                display: block;                margin: 0 auto;                align-items: center;              }              .graf--figure {                text-align: center;                color: gray;                font-style: italic;                font-size: 15px;                margin: 28px auto;                box-sizing: border-box;              }              .graf--figure iframe {                width: 100%;                max-width: 740px;                margin: 0 auto;              }              .graf--p {                font-size: 16px;                line-height: 1.8;                font-family: "Microsoft JhengHei fixed", "Helvetica Neue" ,"Microsoft JhengHei", Helvetica, "Segoe UI", Tahoma, Arial, sans-serif;                letter-spacing: 1px;                font-weight: 400;                max-width: 740px;                color: #535150;                text-align: left;              }              .graf--p > a {                color: #00B3C6 !important;                text-decoration: none !important;              }              .graf--li > a {                color: #00B3C6 !important;                text-decoration: none !important;              }              .graf--quotesSpecial > a {                color: #00B3C6 !important;                text-decoration: none !important;              }              .graf--blockquote > a {                color: #00B3C6 !important;                text-decoration: none !important;              }              .graf--h1 > a {                color: #00B3C6 !important;                text-decoration: none !important;              }              .graf--h2 > a {                color: #00B3C6 !important;                text-decoration: none !important;              }              .graf--h3 > a {                color: #00B3C6 !important;                text-decoration: none !important;              }              a.graf--mention {                color: #535150 !important;                text-decoration: underline !important;                font-weight: 700;              }              .graf--h2 {                font-size: 24px;                padding: 0;                max-width: 740px;                text-align: left;                letter-spacing: 1px;                font-weight: 700;                margin-top: 34px;                line-height: 1.5;              }              .graf--h3 {                font-size: 18px;                padding: 0;                max-width: 740px;                text-align: left;                letter-spacing: 1px;                font-weight: 700;                margin-top: 28px;                line-height: 1.5;              }              .graf--li {                font-size: 16px;                padding: 0px 0px 0px 4px;                font-weight: 400;                letter-spacing: 0px;                list-style-position: outside;                text-align:left;                margin-left: 24px;              }              .graf--hr {                width: 100%;                margin: 0px auto;                transform: translateY(-50%);                position: relative;                padding: 0px;                text-align: left;                max-width: 740px;                margin: 0 auto;              }              .graf--hr hr {                height: 0;              }              .graf--blockquote {                padding: 10px 0px 10px 16px;                font-size: 16px;                color: #7A7574;                letter-spacing: 1px;                margin: 28px 0px;                border-left: 4px solid #DDD9D8;                width: 100%;                max-width: 740px;                text-align: left;              }              .graf--quotesSpecial {                display: table;                color: #7A7574;                position: relative;                padding: 31.5px 40px;                text-align: center;                letter-spacing: 0px;                position: relative;                margin: 29px auto;                font-family: "Microsoft JhengHei fixed", "Helvetica Neue", "Microsoft JhengHei", Helvetica, "Segoe UI", Tahoma, Arial, sans-serif;                font-size: 16px;                -webkit-box-ordinal-group: 1;                -webkit-box-flex: 0;              }              .embed-wrapper {                max-width: 740px;                border: 1px solid #DDD9D8;                display: block;                padding: 12px;                border-radius: 8px;                margin: 12px 0px;                text-decoration: none !important;              }              .embed-title {                font-size: 16px;                font-weight: 700;                color: #535150;                margin-bottom: 8px;                text-align: left;                line-height: 1.5;                text-decoration: none !important;              }              .embed-description {                width: 100%;                font-size: 14px;                color: #7A7574;                line-height: 1.5;                max-height: 150px;                text-align: left;                overflow: hidden;                padding: 12px 0px;              }              .embed-url > a {                width: 100%;                font-size: 14px;                color: #141413 !important;                text-decoration: none !important;                line-height: 1.5;                text-align: left;              }                            .embed-thumbnail-wrapper {                padding-left: 12px;              }              .embed-thumbnail {                width:100px;                border-radius: 8px;              }              pre {                background: #F6F6F6;                border-radius: 8px;                padding: 16px;                font-size: 16px;                color: #535150;                line-height: 180%;                text-align: left;              }              .lexical__textBold {                font-weight: bold;              }              .lexical__textItalic {                font-style: italic;              }              .lexical__textUnderline {                text-decoration: underline;              }              .lexical__textStrikethrough {                text-decoration: line-through;              }              .lexical__textUnderlineStrikethrough {                text-decoration: underline line-through;              }              .lexical__textSubscript {                font-size: 0.8em;                vertical-align: sub;              }              .lexical__textSuperscript {                font-size: 0.8em;                vertical-align: super;              }              .lexical__textCode {                background-color: rgb(240, 242, 245);                padding: 1px 0.25rem;                font-family: Menlo, Consolas, Monaco, monospace;                font-size: 94%;              }            </style></head><body><div class="article-container"><p class="graf--p" dir="ltr"><span style="white-space: pre-wrap;">學完基礎的Lua語法後，今天開始製作第一個遊戲畫面了!</span></p><p class="graf--p" dir="ltr"><span style="white-space: pre-wrap;">我是從YT上找freeCodeCamp.org的教學影片，大家有興趣可以參考看看。</span></p><p class="graf--p" dir="ltr"><span style="white-space: pre-wrap;">一開始是先學人物走動，首先要有人物畫面的話，要先建立一個SpriteSheet，就是把多張定格圖組合成一系列連續動作的合併圖。</span></p><p class="graf--p" dir="ltr"><span style="white-space: pre-wrap;">可以到網路上找免費的遊戲圖庫，在這邊是使用</span><a href="https://www.gameart2d.com/red-hat-boy-free-sprites.html" target="_blank" rel="noreferrer noopener"><span style="white-space: pre-wrap;">gameart2d</span></a><span style="white-space: pre-wrap;">裡面的圖庫，裡面的圖都是一張一張的，所以還需要再自己去網路上找把多個圖片合成SpriteSheet的工具或網頁。</span></p><p class="graf--p" dir="ltr"><br></p><div class="graf--img center"><div class="lexical__imageWrapper"><img src="https://images.vocus.cc/ea085e38-6469-471c-a7df-737fae2accdb.png" data-src="https://d2a6d2ofes041u.cloudfront.net/resize?compression=6&norotation=true&url=https%3A%2F%2Fimages.vocus.cc%2Fea085e38-6469-471c-a7df-737fae2accdb.png&width=740&sign=LSgdM1Fz8AtR9fIKI-wp9YyWnPDJ7FgExxKX1HHbPEA" class="lazy" data-original-src="https://images.vocus.cc/ea085e38-6469-471c-a7df-737fae2accdb.png" data-lowquality="false" data-width="5352" data-height="569" alt="SpriteSheet"></div><div class="captionTheme__wrapper"><p class="captionTheme__paragraph">SpriteSheet</p></div></div><p class="graf--p" dir="ltr"><br></p><p class="graf--p" dir="ltr"><span style="white-space: pre-wrap;">遊戲框架一共分成3大部分，love.load()遊戲一開始會載入的資訊、love.update(dt)隨著frame做動態更新、love.draw()想在視窗中呈現的畫面，寫完基礎的功能後就可以完成人物走動的畫面。</span></p><p class="graf--p" dir="ltr"><span style="white-space: pre-wrap;">如果想看程式碼的部分可以參考我的github或作者的，我會把參考網址都放在最下方讓大家參考。</span></p><p class="graf--p" dir="ltr"><span style="white-space: pre-wrap;">成果 : </span></p><div class="graf--img center"><div class="lexical__imageWrapper"><img src="https://images.vocus.cc/99b5d90b-2899-4a1c-809c-e7f3073728a2.gif" data-src="https://images.vocus.cc/99b5d90b-2899-4a1c-809c-e7f3073728a2.gif" class="lazy" data-original-src="https://images.vocus.cc/99b5d90b-2899-4a1c-809c-e7f3073728a2.gif" data-lowquality="false" data-width="426" data-height="240" alt="人物走動 gif"></div><div class="captionTheme__wrapper"><p class="captionTheme__paragraph">人物走動 gif</p></div></div><p class="graf--p" dir="ltr"><br></p><p class="graf--p" dir="ltr"><br></p><p class="graf--p" dir="ltr"><span style="white-space: pre-wrap;">My github : </span><a href="https://" rel="noreferrer"><span style="white-space: pre-wrap;">https://github.com/YounaChen/WalkingMan</span></a></p><p class="graf--p" dir="ltr"><span style="white-space: pre-wrap;">教學網站 : </span><a href="https://" rel="noreferrer"><span style="white-space: pre-wrap;">https://www.youtube.com/watch?v=I549C6SmUnk</span></a></p><p class="graf--p" dir="ltr"><span style="white-space: pre-wrap;">免費2D圖庫 : </span><a href="https://" rel="noreferrer"><span style="white-space: pre-wrap;">https://www.gameart2d.com/red-hat-boy-free-sprites.html</span></a></p></div></body></html>

以行動支持創作者！付費即可解鎖

軟體開發

[Lua] 製作2D遊戲的前置作業



https://www.youtube.com/watch?v=0L2OgNQDzTc

之前看了啾啾鞋這部影片，裡面說退坑一款手遊，也說到一些觀念，就如下圖這樣













小豆pika的園地

玩遊戲的重點是什麼?體驗和過程吧 

介紹一個優質的遊戲知識部落格：遊戲設計中藥鋪，其中「Game Design 資源分享表」十分推薦遊戲開發者閱讀。另外提到Gamker攻壳是一個專業的遊戲評鑑頻道，其深入的評論幫助作者入坑《健身環大冒險》。作者在後記也分享了自己在遊戲開發上的經歷和挑戰。

歐拉熊的小廢文專欄

【 #週一聊遊戲 】13 - 遊戲設計中藥鋪－GAME DESIGN 543／Gamker攻壳官方频道

這篇文章介紹了使用UE4製作遊戲的練習和免費資源，包括素材連結和對話系統外掛。同時也提到了Unreal遊戲引擎的每月限免素材和線上學習資源，以及Epic Game Store遊戲平臺的優惠和缺點。

【 #週二學創作 】12 - [練習] 3D冒險遊戲／不999～群組知識王！ (共13題)

一個獨立開發者，立志打造顛覆性的遊戲體驗，在開拓全新玩法的道路上，砥礪前行。



大家好，我正在開發一款獨立遊戲，以魔法戰鬥為主題，如果想要嘗試遊戲的demo，歡迎到下方連結處，加入我的Discord群組。



魔法與戰鬥的世界---開發中的遊戲

 

這款遊戲發生在一個飄浮於雲端之上的世界，

Fentus678的沙龍

【遊戲開發01】雲端之城與魔法的奧秘 | 初步介紹

這篇內容，簡單介紹了GameMaker的遊戲製作原理。包括Object、參數、程式碼等概念。同時也簡單介紹了GameMaker的適用範圍和特色。

開心做遊戲 Happy Making Game

GameMaker｜遊戲製作原理｜簡易介紹｜幼幼班01

Youna's Devlog

[LÖVE] 第一個遊戲畫面

一、了解思維

二、大量體驗

三、拆解架構

四、找出樂趣



呈夢的破框宇宙

如何拆解一款桌遊

本文探討了將遊戲視為文本研究對學生的影響，並討論了遊戲的獨特敘事方法，包括新興敘事、環境敘事、互動敘事和機制整合敘事。關鍵詞：電子遊戲、文本、語言藝術、ELA、教室

【 #週五長知識 】2 - 英文paper分享：「機制是資訊：在語言藝術課堂上將視頻遊戲作為文本學習」

職場

學習

<div class="draft-block draft--p left">我現在都看前後，所以我都沒在玩了，而且現在手遊的過程，每天作業感都很重</div>

遊戲&動漫 ACG

目前主要會以書籍心得、動漫心得、生活想法等方面來寫

音樂藝文

週一聊遊戲 

因為就讀研究所需要寫論文，分享一些有用的資訊或自己的興趣，從簡單的文章開始練習，請隨意指教=w=

已累積100多篇小廢文，目前每週更新一次：
▶【 #週一聊遊戲 】▶【 #週二學創作 】▶【 #週三來雜談 】▶【 #週四看影片 】▶【 #週五長知識 】▶【 #週六打電動 】▶【 #週日唱首歌 】

創作

週二學創作

國際

學習GameMaker

免費、開心、簡單，這是我做教學的理念，我希望透過我的行動，讓人們找回自我學習的快樂，讓那些資源稀少的自學者們，也能朝著自己的夢想來前進。讓我們一起開心的做出遊戲吧！

遊戲開發日誌

這裡會放一些我寫過的 Leetcode 解題和學習新技術的筆記

桌遊設計與研究

此空間立志為社會做出3種奉獻:
1.練習獨立思考的最佳捷徑-傳遞心智模式
2.產生令人心生嚮往的場域-打造快樂回憶
3.建立人與人間的緊密連結-滿足情感需求


親子與教育

週五長知識 

作者計劃運用創作型論文的形式來記述遊戲的創作過程，PDF論文草稿中對獨立遊戲與敘事遊戲有所涉及，並歡迎讀者參與討論。

貓貓吉祥

【 #貓貓吉祥專案進度 】2

講述遊戲設計從新手到專業的發展方向。

《遊設計》

對設計師如何成長為設計師好奇嗎?    2020年九月，我進入大學學習當一位設計師，從開始到沉寂，再到重燃熱忱，我將在方格子紀錄我的成長歷程、理念、心情，分享我在這段旅程中所經歷的故事。

瓶裝雪的沙龍

Game Design｜如何學習遊戲設計並脫離新手期 

Leetcode 解題之路 (Python)

Lua 筆記

Python 筆記

資料庫SQL 基本觀念

<p class="lexical__paragraph" dir="ltr"><span style="white-space: pre-wrap;">學完基礎的Lua語法後，今天開始製作第一個遊戲畫面了!</span></p><p class="lexical__paragraph" dir="ltr"><span style="white-space: pre-wrap;">我是從YT上找freeCodeCamp.org的教學影片，大家有興趣可以參考看看。</span></p><p class="lexical__paragraph" dir="ltr"><div class="ad-placeholder" style="min-height: 124px;"></div><span style="white-space: pre-wrap;">一開始是先學人物走動，首先要有人物畫面的話，要先建立一個SpriteSheet，就是把多張定格圖組合成一系列連續動作的合併圖。</span></p><p class="lexical__paragraph" dir="ltr"><span style="white-space: pre-wrap;">可以到網路上找免費的遊戲圖庫，在這邊是使用</span><a href="https://www.gameart2d.com/red-hat-boy-free-sprites.html" target="_blank" rel="noreferrer noopener"><span style="white-space: pre-wrap;">gameart2d</span></a><span style="white-space: pre-wrap;">裡面的圖庫，裡面的圖都是一張一張的，所以還需要再自己去網路上找把多個圖片合成SpriteSheet的工具或網頁。</span></p><p class="lexical__paragraph" dir="ltr"><br></p><div class="lexical__image center"><div class="lexical__imageWrapper"><img src="https://resize-image.vocus.cc/resize?compression=6&amp;norotation=true&amp;url=https%3A%2F%2Fimages.vocus.cc%2Fea085e38-6469-471c-a7df-737fae2accdb.png&amp;width=740&amp;sign=LSgdM1Fz8AtR9fIKI-wp9YyWnPDJ7FgExxKX1HHbPEA" data-src="https://resize-image.vocus.cc/resize?compression=6&amp;norotation=true&amp;url=https%3A%2F%2Fimages.vocus.cc%2Fea085e38-6469-471c-a7df-737fae2accdb.png&amp;width=740&amp;sign=LSgdM1Fz8AtR9fIKI-wp9YyWnPDJ7FgExxKX1HHbPEA" data-loaded="true" data-original-src="https://images.vocus.cc/ea085e38-6469-471c-a7df-737fae2accdb.png" data-lowquality="false" data-width="5352" data-height="569" data-retry="0" onerror="Number(this.dataset.retry) > 4 ? this.src='/static/default-error-img.svg': (() => {this.src=this.dataset.originalSrc; this.dataset.retry = Number(this.dataset.retry)+1;})()" alt="SpriteSheet"></div><div class="captionTheme__wrapper"><p class="captionTheme__paragraph">SpriteSheet</p></div></div><p class="lexical__paragraph" dir="ltr"><br></p><p class="lexical__paragraph" dir="ltr"><span style="white-space: pre-wrap;">遊戲框架一共分成3大部分，love.load()遊戲一開始會載入的資訊、love.update(dt)隨著frame做動態更新、love.draw()想在視窗中呈現的畫面，寫完基礎的功能後就可以完成人物走動的畫面。</span></p><p class="lexical__paragraph" dir="ltr"><span style="white-space: pre-wrap;">如果想看程式碼的部分可以參考我的github或作者的，我會把參考網址都放在最下方讓大家參考。</span></p><p class="lexical__paragraph" dir="ltr"><span style="white-space: pre-wrap;">成果 : </span></p><div class="lexical__image center"><div class="lexical__imageWrapper"><img src="https://images.vocus.cc/99b5d90b-2899-4a1c-809c-e7f3073728a2.gif" data-src="https://images.vocus.cc/99b5d90b-2899-4a1c-809c-e7f3073728a2.gif" data-loaded="true" data-original-src="https://images.vocus.cc/99b5d90b-2899-4a1c-809c-e7f3073728a2.gif" data-lowquality="false" data-width="426" data-height="240" data-retry="0" onerror="Number(this.dataset.retry) > 4 ? this.src='/static/default-error-img.svg': (() => {this.src=this.dataset.originalSrc; this.dataset.retry = Number(this.dataset.retry)+1;})()" alt="人物走動 gif"></div><div class="captionTheme__wrapper"><p class="captionTheme__paragraph">人物走動 gif</p></div></div><p class="lexical__paragraph" dir="ltr"><br></p><p class="lexical__paragraph" dir="ltr"><br></p><p class="lexical__paragraph" dir="ltr"><span style="white-space: pre-wrap;">My github : </span><a href="https://" rel="noreferrer"><span style="white-space: pre-wrap;">https://github.com/YounaChen/WalkingMan</span></a></p><p class="lexical__paragraph" dir="ltr"><span style="white-space: pre-wrap;">教學網站 : </span><a href="https://" rel="noreferrer"><span style="white-space: pre-wrap;">https://www.youtube.com/watch?v=I549C6SmUnk</span></a></p><p class="lexical__paragraph" dir="ltr"><span style="white-space: pre-wrap;">免費2D圖庫 : </span><a href="https://" rel="noreferrer"><span style="white-space: pre-wrap;">https://www.gameart2d.com/red-hat-boy-free-sprites.html</span></a></p>