[Python/Pyxel] 我做了一个复古游戏，可以在网络上玩，也可以在 SNS 上分享。

【Python / Pyxel】Webで遊べてSNSに共有できる，レトロゲームを作ってみた．

介绍

很高兴见到你，
我是 42tokyo 的在读学生，负责 2022 年 42tokyo 降临日历的第 8 天。
这一次，我使用 Python 的复古游戏引擎 Pyxel 创建了一个简单的小游戏。 Pyxel 在学习时是一个零基础的产品。我将按时间顺序简要总结我当时学到的知识、有用的知识和文献。另外，这一次，我不会将手伸向周围的声音和音效，而只是最起码的基本元素。
我希望它对那些想从头开始 Pyxel 的人有所帮助。

什么是Pyxel
游戏制作
环境搭建及手册
程序的基本结构
从示例代码中学习
创建像素艺术动画
移动角色
实现屏幕过渡
在网络上运行 Pyxel 应用程序
实现SNS分享功能

什么是Pyxel

Pyxel 是 Python 的开源游戏引擎。
仅可使用 16 种颜色，最多可同时播放 4 种声音。通过具有复古游戏机意识的简单规格，您可以轻松享受使用 Python 创建像素艺术风格的游戏。
它的特点之一是由于其有限的功能和规格，即使是初学者也很容易学习。
规格
适用于 Windows、Mac、Linux 和 Web
用 Python 编程
16个调色板
256x256 尺寸，3 个图像库
256x256 大小，8 个平铺地图
4 音回放，64 种可定义的声音
8首可以与任何声音结合的音乐
键盘、鼠标、游戏手柄
图像/声音编辑工具

游戏制作

解释一下游戏的内容，很简单：在不被鬼抓到的情况下，尽可能多地收集糖果。随着收集到的糖果数量的增加，会出现具有不同特征的新鬼魂，最多可以被四个鬼魂追逐。这是一款现代孩子连看都不看的游戏，但它很简单，但它调整到了合理的难度。

这部作品是在我所在的 42Tokyo 校园举办的万圣节恐怖代码竞赛中创作的。距离截止日期只有三天，所以当我在寻找一个看起来很容易制作的主题时，我碰巧找到了 Pyxel 并采用了它。
Pyxel 的特点是“易于创建”，但它还有另一大特点是“易于与他人共享”。一个典型的例子是，只需将源代码放在 GitHub 上，就可以直接从 Web 浏览器启动应用程序。这是一个非常棒的功能，只要知道专用链接，任何人都可以在不构建环境的情况下从智能手机上玩。 . .
您实际上可以从下面的链接玩这个游戏，所以如果你喜欢，请尝试一下。

然后，我将总结我所学到的和有用的知识和文献。

环境搭建及手册

在安装了 Python3（3.7 或更高版本）的环境中执行以下命令即可轻松安装。作为 Python 包，只需一个命令即可完成安装。
视窗
```
pip install -U pyxel
```
苹果电脑
```
pip3 install -U pyxel
```
详细规格和使用方法请查看参考资料。
制作过程中如果有不明白的地方，可以在google之前仔细参考这个来解决。
https://github.com/kitao/pyxel/blob/main/docs/README.ja.md

程序的基本结构

参考资料中也有解释
基本上，在 Python 脚本中，代码分为四个主要角色。
· 初始化
・帧更新处理
・绘图过程
・申请的执行
```
import pyxel # Pyxelモジュールをインポート

pyxel.init(160, 120) # 初期化(ウィンドウサイズを指定)

def update(): # フレームの更新処理
    if pyxel.btnp(pyxel.KEY_Q):
        pyxel.quit()

def draw(): # 描画処理
    pyxel.cls(0)
    pyxel.rect(10, 10, 20, 20, 11)

pyxel.run(update, draw)　# アプリケーションの実行
```
在上面的示例代码中，
首先，在init函数中指定窗口大小之后，通过指定执行帧更新处理的更新函数和执行绘图处理的绘制函数作为run函数的参数来执行应用程序。
但是，对于创建执行复杂处理的游戏来说，这并不是一种非常合适的描述方法。建议使用以下类结构包装 Pyxel 处理。
```
import pyxel

class App:
    def __init__(self): # 初期化
        pyxel.init(160, 120)
        self.x = 0
        pyxel.run(self.update, self.draw) # アプリケーションの実行

    def update(self): # フレームの更新処理
        self.x = (self.x + 1) % pyxel.width

    def draw(self): # 描画処理
        pyxel.cls(0)
        pyxel.rect(self.x, 0, 8, 8, 9)

App()
```
对于那些不熟悉 Python 本身的人，这里有一些可能有助于了解“类”、“自我”和“__init__”的参考资料。我想你会在触摸代码的同时了解气氛。
- 类和 self 和 __init__
- 在 Python 中理解 self 和 init
- 一位活跃的工程师解释如何在 Python 中使用 __init__ [针对初学者]
从示例代码中学习

与其从头开始阅读参考文献和文献，建议实际触摸代码中的功能。由于一开始关于Pyxel的文献很少，所以我认为还有机会在似乎实现的代码中搜索它。

首先，我们下载官方提供的示例代码。
安装 Pyxel 后，以下命令将 Pyxel 示例代码复制到当前目录。
```
pyxel copy_examples
```
14个示例代码可用，但暂时是为初学者准备的
我认为只有“01_hello_pyxel.py”和“03_draw_api_py”中的两个就足够了。
前者，了解上一章程序的基本结构和pyxel.frame_count的作用，
对于后者，在查看参考资料的同时能够检查基本绘图 API 就足够了。

创建像素艺术动画

Pyxel 带有一个资源编辑器，允许您创建和编辑图像和声音以在您的应用程序中使用。您可以在 GUI 上轻松操作它，并且可以像动物穿越中的我的设计一样进行设计。
参考这个网站，我学会了如何使用编辑器以及如何实现移动程序。信息简明扼要，非常容易理解。
- 用 Python 和 Pyxel 在 10 行内运行 Invader
对于角色设计，如果您搜索“游戏像素艺术材料”之类的东西，您会发现周围有很多材料。顺便说一句，游戏中男孩的设计就是从这个免费插图中借来的。
- [免费插图] 像素艺术中一组行走的男性角色的啊哈体验
使用我目前学到的知识，我实际上创建了一个这样的动画。动起来不是很可爱吗？ ? ?

移动角色

接下来，我实现了一个程序来自由移动角色。
这有点像根据键盘上四向控制器的输入来增加或减少角色的坐标变量。输入完成后，只是通过update来增加或减少，但需要考虑对障碍物和墙壁的碰撞判断。
以下网站提供了从运动功能的基础开始的分步说明。
- [Python] 用 Pyxel 做一个简单的迷宫游戏。
另外，作为这里的一个小应用，我们还实现了一个敌人（鬼）根据角色坐标追击的功能。这取决于敌人如何移动，但是当角色为中心坐标时，最好根据相对位置（上、下、左、右等）将其划分为不同的情况来确定每个组件的变量。 .关于对角线运动，我认为也有必要了解基本向量的概念。

实现屏幕过渡

通过掌握这一点，您可以在多个阶段和屏幕之间来回切换。
作为一种简单的实现方法，首先为每个画面分配0、1、2等常量，并准备一个代表当前画面的变量（场景）。接下来，在每个触发屏幕转换的事件中（例如，按下某个键时），我们为场景分配一个对应于下一个屏幕的常量。最后，可以根据更新方法中场景变量的值，通过切换画面处理来实现画面过渡。随着切换画面数量的增加，描述量自然会增加，所以我认为最好准备一个更新每个画面的方法。
详情请参阅以下网站。
- 08 使用 Pyxel 制作的屏幕过渡
到目前为止，要记住的基本知识如下。
在那之后，我认为可以单独研究所需的功能，并以迄今为止添加到基础的形象来实现它们。
作为高级内容，我在这里了解了标志和状态转换的概念。在实现跳跃等动作行为时，您可能需要它。请尝试参考。
- [Pyxel] 用 Pyxel 学习的游戏程序 ~Flags and state transitions
在网络上运行 Pyxel 应用程序

正如我前面简要提到的，Pyxel 具有革命性的特性。该功能允许您通过将源代码放在 GitHub 上直接从 Web 浏览器启动应用程序。
一旦您创建了一个应用程序，您就希望其他人使用它，对吗？这个功能的厉害之处在于，如果知道链接，不用搭建环境也可以玩。继续与大家分享。
有关详细信息，如果您将 Pyxel 代码或应用程序 (.pyxapp) 放在 GitHub 上，您只需在 Pyxel Web Launcher 的 URL 中指定文件位置即可运行它，甚至无需创建 HTML 文件。
使用 Pyxel Web Launcher 启动 Pyxel 应用程序的格式如下。
```
https://kitao.github.io/pyxel/wasm/launcher/?play=<githubのユーザー名>.<リポジトリ名>.<アプリのディレクトリ>.<拡張子を取ったアプリ名>
```
例如，在我制作的应用程序中，
・用户名是rwatanab1999
・存储库名称为 Pyxel_trick_or_track
・应用目录为trick_or_track
・应用名称为trick_or_track
这就是为什么，
```
https://kitao.github.io/pyxel/wasm/launcher/?run=rwatanab1999.Pyxel_trick_or_track.trick_or_track
```
上面将是 URL。以下是相关链接。

实现SNS分享功能

一旦我可以在 Web 上运行应用程序，接下来我想实现 SNS 的共享功能。
我这次实现的功能是一键推文游戏得分的功能。除了分享分数外，我们还设计了让其他看到推文的用户关注链接的方法。
我认为 Wordle 等 Web 应用程序流行的原因之一是 SNS 的共享功能。我认为这是你在发布 Pyxel 应用程序时应该牢记的一个功能。

首先，我将解释如何在应用程序中设置外部 URL。
为了控制浏览器和显示网站，我们使用 Python 标准的内置模块 webbrowser。由于它是标准的内置模块，因此无需安装新模块。如果您使用 open 方法指定任何 URL，则可以在浏览器中打开它。
```
import webbrowser

webbrowser.open(url)
```
例如，如果您设置如下条件，则可以在特定范围内单击鼠标时打开浏览器。
```
#42Tokyoのアイコン(16×16)
pyxel.blt(140, 108, 2, 48, 0, 16, 16, 0)

if pyxel.btnp(pyxel.MOUSE_BUTTON_LEFT) and (140 <= pyxel.mouse_x <= 156) and (108 <= pyxel.mouse_y <= 124):
    webbrowser.open("https://42tokyo.jp")
```
webbrowser 模块的详细信息在以下站点中进行了详细说明。
- [Python] 如何启动浏览器并显示网站（webbrowser 模块）
接下来，关于tweet功能的实现。
当您像以前一样单击图标时，固定短语会自动发送推文，但这只是 webbrowser 模块的一个小应用程序。使用工具对您要发布的固定短语进行 URL 编码，并将其指定给 open 方法。
首先，让我们在以下站点上生成一个推文链接并实际打开它。
- 推文链接生成器
至此，推特固定词组的功能已经实现。
但是，由于这个应用程序处理的是分数，这是一个变量，因此需要根据分数的值重写推文的部分固定句子。当然，不可能生成从 0 到满分的定式句子。当分数固定后，让我们通过将分数值替换到模板中来创建一个链接。

关于推文链接的生成，由于即使是 URL 编码，字母数字部分也会按原样显示，因此将变量替换为临时分数部分作为标记

例如，如果生成上图这样的临时链接，请将分数部分替换为花括号 {}。
```
https://twitter.com/intent/tweet?text=score%E3%81%AF{}%E7%82%B9%E3%81%A7%E3%81%97%E3%81%9F%EF%BC%8E
```
将此模板链接视为字符串允许您将得分值嵌入到格式方法中，这允许您使用大括号设置替换字段。
```
template_link = "https://twitter.com/intent/tweet?text=score%E3%81%AF{}%E7%82%B9%E3%81%A7%E3%81%97%E3%81%9F%EF%BC%8E"
result_score = xxxx #スコアの変数
form_link = template_link.format(result_score)
webbrowser.open(form_link)
```
嵌入字符串有多种格式，请参考这里。
- 在字符串中填充
综上所述

非常感谢您花时间阅读长句。
虽然开发时间很短，但我感受到了 Pyxel 的各种可能性，并希望使用更先进的技术和技术继续生产。由于这次没有制作BGM和音效，以后我会努力学习音乐的。
Pyxel 具有被更广泛认可的潜力，因此请尝试将其作为先驱进行开发。