C2/C3 Wiki

这是本文档旧的修订版！

---

[]: # (Construct 3 LOGO)
 []: —————————————————-
[]: # (标题)
[]: —————————————————-
## Construct 3 案例图书馆
最后更新时间：2020-03-24

[]: —————————————————-
[]: # (官方导航)
[]: —————————————————-
#### 官方导航
| [打开Construct 3](https://editor.construct.net/) | [论坛](https://www.construct.net/en/forum) | [教程](https://www.construct.net/en/tutorials?flang=-1&content=0&orderID=3) | [Wiki](http://wiki.0tw.cn/) ———— []: —————————————————-
[]: # (基础教程)
[]: —————————————————-
###### 基础教程

..

[]: —————————————————-
[]: # (BEHAVIOR REFERENCE )
[]: —————————————————-
##### Behavior
[]: # (Platform)

[]: # (8Direction)
|  8Direction | 作者 | 类型 | 下载 |
| :———— | :————: | :————: | :————: |
| 武器开火时的后坐力(8Direction反作用力),可用于击退效果 | dop2000 | .c3p | [下载](https://c2c3.oss-cn-beijing.aliyuncs.com/project/example/Platform/WeaponKnockback8direction.c3p) |
| 地图场景移动，从布局移动到另一个布局，地图传送点 | dop2000 | .c3p | [下载](https://c2c3.oss-cn-beijing.aliyuncs.com/project/example/8Direction/PortalSystem.c3p) |
| 将对象的位置映射在另一个对象的相对位置（雷达小地图） | dop2000 | .capx | [下载](https://c2c3.oss-cn-beijing.aliyuncs.com/project/example/8Direction/ManOnARaft.capx) |
| 将对象的位置映射在另一个对象的相对位置（雷达小地图） | dop2000 | .capx | [下载](https://c2c3.oss-cn-beijing.aliyuncs.com/project/example/8Direction/ManOnARaft.capx) |
| 向指定位置投掷飞剑，还可以让它飞回来 | hcatarrunas | .c3p | [下载](https://c2c3.oss-cn-beijing.aliyuncs.com/project/example/8Direction/ThrowSword.c3p) | []: # (Bullet)

[]: # (Pathfinding)
|  Pathfinding| 作者 | 类型 | 下载 |
| :———— | :————: | :————: | :————: |
| 队伍开火车寻路，并防止寻路对象相互叠加 | dop2000 | .c3p | [下载](https://c2c3.oss-cn-beijing.aliyuncs.com/project/example/Pathfinding/Pathfinding_NoOverlapWhileMoving.c3p) |
| 狼吃羊AI，自动寻找最近的目标，吃掉后继续寻找下个目标 | dop2000 | .capx | [下载](https://c2c3.oss-cn-beijing.aliyuncs.com/project/example/Pathfinding/ChasingAnimals.capx) | []: # (LineOfSight)

[]: # (Turret)
|  Turret | 作者 | 类型 | 下载 |
| :———— | :————: | :————: | :————: |
| 炮塔显示攻击范围，建造炮塔检测通行，敌人自动寻路 | hcatarrunas | .c3p | [下载](https://c2c3.oss-cn-beijing.aliyuncs.com/project/example/Turret/turretdefenceHC.c3p) | []: # (DragDrop)

[]: # (Physics)
|  Physics | 作者 | 类型 | 下载 |
| :———— | :————: | :————: | :————: |
| 物理画线游戏，画线条支撑物体 | dop2000 | .capx | [下载](https://c2c3.oss-cn-beijing.aliyuncs.com/project/example/Physics/PhysicsDrawing.capx) |
| 物理益智游戏，拖动积木重组空间拼图 | dop2000 | .c3p | [下载](https://c2c3.oss-cn-beijing.aliyuncs.com/project/example/Physics/PhysicsMoveBlocks.c3p) | []: # (Fade)

[]: —————————————————-
[]: # (PLUGIN REFERENCE)
[]: —————————————————-
##### Plugins []: # (Particles)

[]: # (Text)
|  Text | 作者 | 类型 | 下载 |
| :———— | :————: | :————: | :————: |
| 波浪文字动画(使用Buttle+Sine) | dop2000 |.capx | [下载](https://c2c3.oss-cn-beijing.aliyuncs.com/project/example/Text/TextWave.capx) | []: # (Tilemap)

[]: # (Timeline)
|  Timeline| 作者 | 类型 | 下载 |
| :———— | :————: | :————: | :————: |
| 开场显示LOGO动画(轻松，欢快，翻转) | hcatarrunas | .c3p | [下载](https://c2c3.oss-cn-beijing.aliyuncs.com/project/example/Timeline/contruct_intro.c3p) |
| 开场显示LOGO动画(神秘，恐怖，严肃) | hcatarrunas | .c3p | [下载](https://c2c3.oss-cn-beijing.aliyuncs.com/project/example/Timeline/contruct_Intros2.c3p) | []: # (Canvas)

[]: # (Array)
|  Array| 作者 | 类型 | 下载 |
| :———— | :————: | :————: | :————: |
| 临时排行榜，数组写入玩家名和分数，并排序显示 | dop2000 | .c3p | [下载](https://c2c3.oss-cn-beijing.aliyuncs.com/project/example/Array/LeaderboardSort.c3p) | []: # (Local Storage)

[]: # (SliderBar)
|  SliderBar| 作者 | 类型 | 下载 |
| :———— | :————: | :————: | :————: |
| 用DragDrop手动实现滑动条(4个方向，自定义容器) | hcatarrunas | .c3p | [下载](https://c2c3.oss-cn-beijing.aliyuncs.com/project/example/UI/SliderBar/Pixeldragger.c3p) |
[]: —————————————————-
[]: # (OBJECT INSTANCES)
[]: —————————————————-

##### Object instances

[]: # (Collision)
| Collision | 作者 | 类型 | 下载 |
| :———— | :————: | :————: | :————: |
| 检测2个大物体精确的碰撞点 | dop2000 | .capx | [下载](https://c2c3.oss-cn-beijing.aliyuncs.com/project/example/Collision/CollisionPointDetection5.capx) |
[]: —————————————————-
[]: # (SYSTEM REFERENCE)
[]: —————————————————-

##### UI

[]: —————————————————-
[]: # (SCRIPTING OVERVIEW)
[]: —————————————————- |  JavaScript in C3 | 作者 | 类型 | 下载 |
| :———— | :————: | :————: | :————: |
| 旋转平台，角色踩上平台跟着旋转，像游乐场转转杯。<br>(脚本自定义函数，获取本地变量，调用系统JSON插件，返回Function参数) | Mikal | .c3p | [下载](https://c2c3.oss-cn-beijing.aliyuncs.com/project/example/Javascript/Circular_Platforms.c3p) | []: —————————————————-
[]: # (OTHER)
[]: —————————————————-

---

[]: —————————————————-
[]: # (常见问题)
[]: —————————————————-
#### 常见问题 []: # (Disclaimer)
###### 这些范例都从哪来的？
这里提供的.c3p或.capx项目文件，大多数都来自Construct官网[教程板块](https://www.construct.net/en/tutorials?flang=-1&content=0)、[论坛提问板块](https://www.construct.net/en/forum/construct-3/how-do-i-8)、[Discord频道](https://discordapp.com/channels/116497549237551109/225550155531812865)。他们分散在各种地方，想检索的时候不好找，于是我们整理了这个案例图书馆，方便大家轻松找到想看的案例。
在大多情况下，这些案例中并非是最合适的实现方案，只是一种可以提供你参考的想法思路。同样的，他们也并非最佳的入门学习资料，如果你还是初学者建议先把官方的模版看懂。由于每个开发者的开发习惯不同，案例只是提供了基本的逻辑实现，他们仍有非常大的优化空间，这些后续的工作都必须由你自己来完成。在参考案例过程中，多思考他为什么要这么做，可不可以按另一种方法那样做。以他的案例为模版，先学会修改参数，看懂事件运行的原理，提取出最核心的事件代码，然后继续扩展事件逻辑，这样才能把他的想法真正转换为自己的经验。

[]: # (How to Open .c3p)
###### 我该用什么工具打开？
这里提供的.c3p或.capx项目文件，可以使用[Construct3编辑器](https://editor.construct.net/)打开。进入编辑器后，可以将已下载的.c3p或者.capx文件直接拖入编辑器窗口，或者在菜单手动打开项目。
[]: # (Construct 3 beta releases)
###### 为什么无法打开项目？
当你打开某个.c3p项目时出现“Construct 3 beta”提示框，说明此项目的开发者使用了较新的Beta版本。你需要在新版本编辑器中重新打开它。

你可以在官网[Construct 3 版本列表](https://www.construct.net/en/make-games/releases/beta)页面，找到目前最新的beta版本使用。

[]: # (Free editon limit)
###### 为什么无法编辑项目？
当你打开某个项目时想编辑事件，却弹出“Free editon limit”提示框，无法继续编辑。说明你目前使用的是免费版，免费版存在着许多限制，比如最多只能添加50条事件，最多新建2个图层…如果想解除限制，请给它恰饭！不充钱，能变得更强吗？

<p class=“c3dialog_text c3dialog_title_text”>Free editon limit</p>

<svg fill=“#000000” height=“48” viewbox=“0 0 24 24” width=“48” xmlns=“http://www.w3.org/2000/svg”><path d=“M0 0h24v24H0z” fill=“none”></path><path d=“M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-2h2v2zm0-4h-2V7h2v6z”></path></svg>

<p class=“c3dialog_strong_text”><strong>This project exceeds the Free Edition limits</strong></p>

<p class=“c3dialog_text c3dialog_content_text”>You cannot modify this project when the limits are exceeded. Register an account and log in to increase the number of events you can use. Purchase a plan to remove all of the Free Edition limits.</p>

[]: # (What is .capx)
###### .c3p 和 .capx 有什么区别？
Construct 3可以直接导入未使用第三方插件的C2项目.capx，并将它自动转换为C3 runtime。但Construct 2 不能打开.c3p的项目。向下兼容。
需要注意的是，官方宣布即将在2021年7月1日，正式停用Construct 2。如果你目前还在使用Construct 2，建议使用Construct 3，真的好用。
当你下载了某个.capx，发现它正好能实现你理想的效果时，请注意检查该项目的事件功能是否在Construct3中有更新，比如改动最大的Function，已经成为C3编辑器内置组件，使用的方法也有了变化。
另外，如果你的.capx项目使用了第三方插件，但是又希望将移植项目到Construct 3，只能先将使用了非官方插件的部分事件删除，手动导入后再想办法寻找其他解决办法。比如，寻找该插件C3 runtime的移植版本，或者使用其他插件代替。

---

[]: —————————————————-
[]: # (QQ群)
[]: —————————————————-
#### 联系方式
CiGA Construct2/3 开发者QQ群：180911504 []: —————————————————-
[]: # (硬核。修改全局主题)
[]: —————————————————-
<style name=“xhxiaiein_globalstyle” type=“text/css”>
:root { –icon-theme: #171717;}
/* Built-in */
.entry-header, .header-footer-group,.comments-wrapper,.section-inner{display:none}
/* main */
body{width:100%; background-color:#e6e6e6;font-size:16px;line-height:20px;font-weight:400;min-width:420px;}
.entry-content {margin-top:-50px; margin-bottom: 8rem;position: relative; min-height: 100%; height: 100%;padding-top:24px}
.entry-content *{margin:0 auto;box-sizing: border-box;}
/* Font */
.entry-content h1,h2,h3,h4, h5,h6{line-height: 26px; margin: 24px auto; font-weight: bold;}
.entry-content h6{padding-bottom:10px; margin-bottom: 5px;}
.entry-content p { white-space: pre-line; word-break:break-all;}
.entry-content p, a{ font-size: 14px; padding:0; margin: 0 auto;}
.entry-content table, table *, hr { margin: 0 auto; border-color: #2b2b2b; }
/* table-frame */
.table_frame { padding-top: 4px; padding-bottom: 8px;}
.table_frame:after {content: '\A'; white-space: pre;}
.table_frame table { width:100%; border-collapse: collapse;}
.table_frame table *{font-size: 14px;}
.table_frame table tbody{ width: 100%; table-layout: fixed !important;}
/* hr */
.entry-content hr:before{display:none}
.entry-content hr:after{display:none}
.entry-content hr{border-style: dashed; border-width: 0.5px; }
/* td */
.table_frame table td:nth-of-type(1) {width: 380px;}
.table_frame table td:nth-of-type(3) {width: 28px;}
.table_frame table td:nth-of-type(4) {width: 32px;}
.table_frame table td:nth-of-type(2) {white-space: nowrap !important;}
.table_frame table td:nth-of-type(3) {white-space: nowrap !important;}
.table_frame table td:nth-of-type(4) {white-space: nowrap !important; text-align: center !important;}
/* th */
.table_frame table th{font-weight: bold; white-space: nowrap; background: #c2c2c2; }
/* svg-color */
.table_frame table th:nth-of-type(1) * {display: inline-block !important;vertical-align: sub !important;height:20px; }
.table_frame table th:nth-of-type(1) img{pointer-events: none;position: relative; left: -27px; overflow: hidden; filter:drop-shadow(27px 0 0 var(–icon-theme));-webkit-filter:drop-shadow(27px 0 0 var(–icon-theme));-moz-filter:drop-shadow(27px 0 0 var(–icon-theme));}
</style>

[]: # (仿C3对话框)
<style name=“xhxiaiein_c3dialog” type=“text/css” >
.c3dialog_frame{display:block;width:95%;margin:10px auto 10px auto !important;box-sizing:border-box;padding:0;vertical-align:top}
.c3dialog_title{width:100%;box-sizing:border-box;border-width:2px 2px 0;border-radius:10px 10px 0 0;border-style:solid solid none;border-color:#4180c6;background-color:#2980cc;padding:2px 4px}
.c3dialog_text{font-size:14px !important;line-height: 20px !important;margin: 0 !important; padding: 0 !important;}
.c3dialog_title_svg{margin:0px auto;display:flex;justify-content: left;align-items:center;}
.c3dialog_title_text{color: #fff !important;text-align:center !important;padding:0 !important;}
.c3dialog_strong_text{color:#000 !important;font-size:18px !important;margin:0 !important;padding:0 !important;margin-left:8px !important;}
.c3dialog_content_text{color: #000 !important;padding-top: 4px !important;}
.c3dialog_content_frame{display:inline-block;border-width:0 2px 2px;border-radius:0 0 10px 10px;border-style:none solid solid;background-color:#efefef;padding:10px 20px 20px;box-sizing:border-box;border-color:#d8d8d8;}
</style> []: # (移动端适配)
<style name=“xhxiaiein_tableMobileView” type=“text/css”>
@media screen and (max-width: 460px) {

/* table */\\
.table_frame th{display: none;}\\
.table_frame td{display: none;}\\
.table_frame th:nth-of-type(1) {width: 100%;}\\
.table_frame th:nth-of-type(1) {display: table-cell;}\\
.table_frame td:nth-of-type(1){display: table-cell;}\\
.entry-content:before {content: '亲，建议使用电脑端阅读。'; white-space: pre; color: #f7f9fa; background-color: #2a80eb; display: block;padding: 4px 6px 4px 6px;margin-bottom:24px; margin-top:-24px;}\\

}
</style>

[]: —————————————————-
[]: # (硬核。页面渲染结束后插入代码)
[]: —————————————————- []: # (在table外部包裹一层div，自适应宽度)
<script type=“text/javascript”>
[].slice.call(document.querySelectorAll('table')).forEach(function(e){ var wrapper = document.createElement('div'); wrapper.className = 'table_frame'; e.parentNode.insertBefore(wrapper, e); e.parentNode.removeChild(e); wrapper.appendChild(e);})
</script>