> For the complete documentation index, see [llms.txt](https://docs.allout.game/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.allout.game/all-out-docs/docs-zh/kuai-su-ru-men/testing-and-publishing.md).

# 构建一个基础游戏

### 苹果收集

{% hint style="info" %}
这个示例游戏只略过了一些在其他指南中有详细介绍的细节。如果你需要帮助，请查看左侧边栏，或使用顶部的搜索功能获取更多信息！
{% endhint %}

#### 构建地图

我们将先创建一个基础世界，包含一个可以行走的岛屿，以及一个稍后收集的苹果！

1. 在以下内容中搜索 Apple 和 Island： [资源目录](/all-out-docs/docs-zh/shi-yong-bian-ji-qi/asset-catalog.md) 并将它们拖入你游戏的场景视图中。

<figure><img src="/files/28938e2ceba0c58649ee48528a2b3ce03a9e4452" alt="Apple and island assets placed in the scene"><figcaption></figcaption></figure>

2. 那个岛屿太小了！在 [检查器](/all-out-docs/docs-zh/shi-yong-bian-ji-qi/inspector.md) 中将 `缩放` 设置为 10x10 以使它变大

<figure><img src="/files/59d7c2adce7a275324c3410787990c4960fa1810" alt="Island scale set in the Inspector"><figcaption></figcaption></figure>

3. 现在岛屿的大小合适了，但苹果在岛屿后面！将岛屿的 `图层` 设置为 -10，把它推到其他所有物体后面。

<figure><img src="/files/54c46af3870d6d6636fa2c8ef08b9e1fbded22f5" alt="Island rendering layer set in the Inspector"><figcaption></figcaption></figure>

#### 添加脚本

在你的游戏项目的 `scripts` 目录中，创建一个名为 `pickup_apple.csl` 的新文件，并在文本编辑器中打开它，或者使用一个 [基于 AI 的 IDE](/all-out-docs/docs-zh/jiao-ben-bian-xie/cursor-claude-antigravity-setup.md).

粘贴以下示例脚本并保存文件：

```go
// 这会创建一个让苹果可交互的组件，
// 我们将在教程的下一步把它添加到 Apple 上。
Pickup_Apple :: class : Interactable {
    is_picked_up: bool;

    ao_start :: method() {
        this.set_listener(this);
        this.set_text("拾取");
    }

    can_use :: method(player: Player) -> bool {
        if is_picked_up return false;
        return true;
    }

    on_interact :: method(player: Player) {
        if is_picked_up return;
        is_picked_up = true;

        // 开始弹出效果
        effect := new(Apple_Pop_Effect);
        entity.set_active_effect(effect);
    }
}

// 你吃掉它时的一个酷炫动画 :D
Apple_Pop_Effect :: class : Effect_Base {
    sprite: Sprite_Renderer;
    start_scale: v2;
    start_pos: v2;

    effect_start :: method() {
        sprite = entity.get_component(Sprite_Renderer);
        start_scale = entity.local_scale;
        start_pos = entity.local_position;
        set_duration(0.4);
    }

    effect_update :: method(dt: float) {
        t := get_elapsed_time() / 0.4;

        // 先放大，然后迅速缩小到无
        scale_curve: float;
        if t < 0.3 {
            // 快速弹起（缩放到 1.3 倍）
            scale_curve = lerp(1.0, 1.3, Ease.out_back(t / 0.3));
        } else {
            // 缩小到无
            scale_curve = lerp(1.3, 0.0, Ease.in_back((t - 0.3) / 0.7));
        }

        entity.set_local_scale(start_scale * scale_curve);

        // 稍微向上漂浮
        rise := Ease.out_quad(t) * 0.5;
        entity.set_local_position({start_pos.x, start_pos.y + rise});

        // 在接近结尾时淡出
        if sprite != null {
            alpha := 1.0 - Ease.in_quad(max(0.0, (t - 0.5) / 0.5));
            sprite.color.w = alpha;
        }
    }

    effect_end :: method(interrupt: bool) {
        entity.destroy();
    }
}
```

> 保存 CSL 文件时会自动检测并编译。在运行测试中，按 **Alt+F9** 可手动热加载已编译的脚本。场景更改需要停止并重新启动。 **Ctrl+R** 会重新加载整个编辑器项目，普通脚本编译不需要。

#### 添加 Apple 组件

现在你已经创建了苹果脚本，我们需要将它应用到场景中的苹果上。为此，我们将通过检查器添加新的 `Pickup_Apple` 脚本中的组件。

1. 在场景中选中你的 Apple。
2. 点击检查器中的“添加组件”按钮。
3. 搜索“Pickup\_Apple”组件并点击它，将其添加到苹果上。

<figure><img src="/files/8a460d3cbf4b06ccf6788488d30c5209855c3fdd" alt="Adding the Pickup Apple component in the Inspector"><figcaption></figcaption></figure>

现在你会看到该组件已经添加到苹果上了！你可以通过在检查器中修改值来调整 Apple 的一些字段：

<figure><img src="/files/b2639ace4986b17ccd4b6075a9767f38e49a0693" alt="Pickup Apple component fields in the Inspector"><figcaption></figcaption></figure>

#### 运行你的游戏

准备好后，点击有趣的绿色三角形，试试你的游戏吧！

<figure><img src="/files/e379c7bf17a9c16ec2699040d48611835637bd55" alt="Apple collection game running in a local test"><figcaption></figcaption></figure>

### 下一步

在接下来的部分中，你将学习如何与多个玩家一起试玩你的游戏、创建你自己的脚本，以及构建你梦想中的世界。

**下面是一些可以尝试的挑战：**

* 制作很多苹果供玩家吃掉
* 在被吃掉时播放音效
* **高级：** 尝试编写一个脚本，让苹果被吃掉后重新生成更多苹果

\--

{% hint style="info" %}
旁注：如果你的岛屿分辨率较低/有像素块，请在“Assets”部分点击岛屿的 png 资源，将 Resample Multiplier 设为 1，然后点击 Apply

<img src="/files/65d6a6f799f12369b54ecbc7f650a49e51b6f8f7" alt="Texture settings with Resample Multiplier set to 1" data-size="original">
{% endhint %}