迷子でもいい、迷子でも進め 2026-02-12T05:17:58.388Z https://alphardex.github.io/mygo/ alphardex Hexo 70027878673944576 56524146701268992 https://alphardex.github.io/mygo/posts/11328/ 2026-01-26T08:22:16.000Z 2026-02-12T05:17:58.388Z

<h2 id="缘起：为什么我一直想做一个游戏"><a href="#缘起：为什么我一直想做一个游戏" class="headerlink" title="缘起：为什么我一直想做一个游戏"></a>缘起：为什么我一直想做一个游戏</h2><p>小时候，我上过很多诸如 4399、7k7k 等小游戏网站，接触过了很多 Flash 小游戏，那些游戏现在回看，技术并不复杂，美术也谈不上精致，但它们都有个共同点：</p> <p><strong>你能明显感觉到，这是“某一个人”做出来的东西。</strong></p> <p>长大后，我开始玩上了 Steam 平台上的游戏，接触到了诸如《Rabi-Ribi》、以及它的续作《TEVI》这类横板 ACT 作品，这种感觉再次被放大了。</p> <p>横板 ACT 的战斗密度、Boss 的弹幕节奏、游戏本身的表达性，让我第一次意识到：</p> <p><strong>ACT 不只是操作游戏，也是一种叙事方式。</strong></p> <p>而另一条线，则来自于我长期接触的二次元内容。</p> <p>就拿我喜欢的 BanG Dream!!、PJSK 这类企划来举例，它们本身并不是“游戏性导向”，但它们作品中的角色、剧情、情绪、世界观，一直让我觉得：</p> <p><strong>如果用另一种形式去承载，可能会很有意思。</strong></p> <p>这几条线慢慢地交汇在一起，我开始有了一个很模糊、但一直挥之不去的念头：</p> <p><strong>我也想创造一个“我自己会想反复打开”的游戏世界。</strong></p>

https://alphardex.github.io/mygo/posts/21230/ 2025-12-31T06:00:34.000Z 2025-12-31T07:09:24.837Z

<p><img src="https://s2.loli.net/2025/12/31/edyuobzgDOiw651.jpg" alt="banner"></p> <p>这里是 alphardex。</p> <p>不知不觉，一年过去了，又到了总结的时候。</p>

https://alphardex.github.io/mygo/posts/57824/ 2025-08-28T08:26:46.000Z 2025-09-01T07:16:59.809Z

<p>这里是 alphardex。</p> <p>在现代 Web 开发中，我们常常利用特定的 HTML 标签来呈现不同形式的视觉内容：<code>&lt;img&gt;</code>用于图片，<code>&lt;video&gt;</code>用于视频。但除此之外，你知道 Web 上还能展示哪些视觉元素吗？本文将带你探索 Web 世界中的多样化视觉组件，从内容展示到炫酷特效，一览现代 Web 的视觉表现力。</p>

https://alphardex.github.io/mygo/posts/44625/ 2025-02-17T06:02:57.000Z 2025-02-23T12:36:52.255Z

<p>我将人生第一次 live 献给了 Roselia，想对 live 的一整天做一个详细的 Repo。</p>

https://alphardex.github.io/mygo/posts/62205/ 2025-01-02T04:50:00.000Z 2025-01-02T05:01:28.799Z

<p><img src="https://s2.loli.net/2024/12/28/rv5sRFTfJOSzICx.jpg" alt="laptop-tomori"></p> <p>这里是 alphardex。</p> <p>时间很快，一年过去了，又到了总结的时候。</p>

https://alphardex.github.io/mygo/posts/17054/ 2024-10-06T14:11:00.000Z 2024-10-06T15:04:28.153Z

<p>这个国庆我原本想七天都宅在家里的，但后来我还是改变了主意，决定去外面看一看。</p>

https://alphardex.github.io/mygo/posts/59816/ 2024-09-19T12:45:00.000Z 2024-09-19T12:45:32.881Z

<p>当我得知我喜欢的乐队 MyGO!!!!!将于上海开演唱会时，我内心十分激动。然而，票务代理却是臭名昭著的 EUPD，他们以放票少，官牛多而出名，让无数抢不到票的粉丝伤透了心。</p> <p>当抢票信息公布后，我并不打算直接用手机去抢票，因为这样成功率实在是太低了，感觉就跟原神无保底单抽出金的概率差不多吧。</p> <p>作为一个还算懂点技术的人，我决定利用我平时所学，打造出几个抢票利器，来助我一臂之力。</p>

https://alphardex.github.io/mygo/posts/36637/ 2024-06-18T09:15:10.000Z 2024-06-26T01:31:34.613Z

<p><a href="https://cloud.tencent.com/document/product/269/64506">TUIKit</a>是腾讯的一个基于 Chat SDK 的 UI 组件库，目前支持 H5、小程序、uni-app，但并没有对 Taro 的支持。</p> <p>由于我的项目是基于 Taro 的，因此我先要把它 uni-app 的版本迁移到 Taro 上去。</p>

https://alphardex.github.io/mygo/posts/63891/ 2024-05-22T00:16:23.000Z 2024-05-21T12:46:14.140Z

<p>这里是 alphardex。</p> <p>最近我想做一件事情，这件事情是我之前一直想做，但迟迟未能落成的事，那就是——cosplay！</p> <blockquote> <p>cosplay 是一种潮流，它源自日本，指的是模仿并扮演动画、漫画、游戏（简称 ACG）等虚构作品中角色的活动。参与者通常会精心设计自己的服装和化妆，以尽可能地还原原作中角色的外貌和特点。这不仅是一种娱乐活动，也是一种表达对喜爱作品的热情和尊重的方式。无论是在展会、活动中，还是在社交媒体上，cosplay 都是一种展示个人创意和爱好的方式。（By ChatGPT）</p> </blockquote> <p>作为一个宅龄十年的 ACG 爱好者，不玩一次 cosplay 真的是有点对不住这个身份。</p> <p>记得在学校读书的那个时候，不仅没钱，而且还被各种作业和考试压迫，但现在就不一样了，钱是足够的，并且下班回家后还相对比较自由，在这些条件下，为什么不试着大干一把呢？</p> <p>本文就暂时不谈技术了，专门讲讲我探索 cosplay 的过程。</p>

https://alphardex.github.io/mygo/posts/17935/ 2024-03-28T00:24:49.000Z 2024-05-21T12:46:11.524Z

<p>这里是 alphardex。</p> <p>最近看到有小伙伴发了一个小米 SU7 的展示网页，那是相当的酷炫：</p> <p><img src="https://s2.loli.net/2024/03/28/NBucKfVrZM3FD71.png" alt="intro"></p> <p>光看上面的图可能看不出来什么，请直接访问原网页：<a href="https://gamemcu.com/su7/">https://gamemcu.com/su7/</a></p> <p>当你体验一遍后，会看到各种炫酷的效果，包括隧道穿梭、波浪动画等，并且还有些细节也值得注意，如地面的反射效果。</p> <p>那么这个网页是用哪个技术实现的呢？答案是<code>three.js</code>，不论是从控制台，还是一些技术解析插件都能得知。</p> <p>但是，这里我要研究的重点却并非<code>three.js</code>本身。仅仅用<code>three.js</code>展示一个<code>3D</code>模型，相信对大家来说并不是很难。真正的难点，是那些炫酷的效果是如何实现的。想要实现那些效果，就得靠<code>three.js</code>背后的功臣——<code>Shader</code>，也就是着色器。</p> <p>为了进一步地加强<code>three.js</code>和<code>Shader</code>的学习，我决定爆肝几天，亲手把那些炫酷的效果给还原出来。</p> <p>经过一定的努力，总算是写出来了。不多说，放地址：<a href="https://su7-replica.netlify.app/">https://su7-replica.netlify.app/</a></p> <p>对整体流程做了一个简化：入场动画过后，无需长按，点击汽车即可直接进行冲刺（方便直接录制动图或视频），再次点击汽车即可取消冲刺，返回原来的状态。</p>

https://alphardex.github.io/mygo/posts/57476/ 2023-12-06T01:34:54.000Z 2024-05-21T12:46:13.654Z

<p>呀哈喽！这里是 alphardex。</p> <p>一年时间过的如此之快，又到了总结的时候了。</p>

https://alphardex.github.io/mygo/posts/2819/ 2023-11-27T08:25:16.000Z 2024-05-21T12:46:15.379Z

<p>相信不久前大家已经被这个粒子动画给刷屏了吧：</p> <p><img src="https://s2.loli.net/2023/11/27/uvFLrXDKYHa1Ppl.png" alt="bcab9963-4461-4964-96a0-214a15626f75"></p> <p>之前看过很多人都在分析跟这个效果相关的跨窗口通信技术，尽管这样是挺好，但我依旧有点纳闷：为什么没有人讲讲背后的粒子特效是怎么实现的呢？</p> <p>于是乎，我花了一整个周末，把这个粒子特效给肝了出来。尽管可能跟原特效相比有一点差距，但也表明了这种效果是可以实现的。</p> <p><img src="https://s2.loli.net/2023/11/27/KqNm5ITYWidblpH.gif" alt="entangled"></p> <p>在线体验：<a href="https://entangled-fxhash.netlify.app/">https://entangled-fxhash.netlify.app/</a></p> <p>本文就让我们来看看实现这个粒子特效有哪些要点吧~</p>

https://alphardex.github.io/mygo/posts/10700/ 2023-10-16T00:45:10.000Z 2024-05-21T12:46:14.501Z

<p>之前看到有人在浏览器端复刻了原神的登录界面，效果非常还原。</p> <p>本文就让我们一起来看看这种效果是如何实现的，主要分析<code>Shader</code>相关的部分。</p> <p>怀着学习的目的，我自己也写了一版，观看地址：<a href="https://genshin-replica.miaohezi.com/">https://genshin-replica.miaohezi.com/</a></p> <p><img src="https://s2.loli.net/2023/10/16/IK3H2qUd4o7BiEn.png" alt="b86976a6-1228-4658-bae1-5b842e588206"></p>

https://alphardex.github.io/mygo/posts/44091/ 2023-03-13T05:20:58.000Z 2024-05-21T12:46:14.978Z

<p>呀哈喽！这里是 alphardex。</p> <p>在使用 three.js 开发时，有时会感觉场景的渲染不是非常美观，本文就来一步一步地将一个不是很美观的场景重新焕发它的生机。</p> <p>场景美化前：<br><img src="https://s2.loli.net/2023/03/13/V1T6srfquQcExZH.png" alt="before.png"></p> <p>场景美化后：<br><img src="https://s2.loli.net/2023/03/13/BXtsu21gZnMKS56.png" alt="after.png"></p>

https://alphardex.github.io/mygo/posts/5999/ 2023-02-15T08:23:21.000Z 2024-05-21T12:46:18.029Z

<p>呀哈喽！这里是 alphardex。</p> <p>最近我用 three.js 模拟了一下现实中的下雨效果，让我们一起来看看它是怎么实现的吧。</p> <p><a href="https://code.juejin.cn/pen/7200287096689393720">https://code.juejin.cn/pen/7200287096689393720</a></p>

https://alphardex.github.io/mygo/posts/2989/ 2023-01-01T03:29:00.000Z 2024-05-23T02:18:40.425Z

<p>呀哈喽！这里是 alphardex。</p> <p>一年是如此的短暂，是时候来场总结了。</p>

https://alphardex.github.io/mygo/posts/11844/ 2022-11-21T06:48:00.000Z 2024-05-22T00:24:45.581Z

<p>呀哈喽！这里是 alphardex。</p> <p><img src="https://s2.loli.net/2024/05/22/jOlc4aJW1kXuz7M.jpg" alt="Snipaste_2022-11-21_22-35-00.jpg"></p> <p>最近受到轮回系作品<a href="https://www.agemys.net/detail/20200118">《寒蝉鸣泣之时》</a>中时空裂缝场景的启发，我用 three.js 实现了一个实时渲染的时空裂缝场景。本文将简要地介绍下实现该效果的要点。</p> <p>以下特效全屏观看效果最佳~</p> <p><a href="https://code.juejin.cn/pen/7168065415069827124">https://code.juejin.cn/pen/7168065415069827124</a></p>

https://alphardex.github.io/mygo/posts/8412/ 2022-11-10T01:51:00.000Z 2024-05-21T12:46:16.376Z

<p>呀哈喽！这里是 alphardex。</p> <p><a href="https://threejs.org/docs/#examples/en/math/MeshSurfaceSampler">MeshSurfaceSampler</a>，是 three.js 的表面采样器，通过它，我们可以在一个<code>Mesh</code>的表面拾取一定数量的随机点位，从而实现一些炫酷的粒子特效，请看以下的效果（全屏最佳）：</p> <p><a href="https://code.juejin.cn/pen/7164008029766025223">https://code.juejin.cn/pen/7164008029766025223</a></p> <p>本文将简要地介绍一下实现这个效果的思路</p> <p>PS：本文标题 neta 了<a href="https://bangumi.tv/subject/328609">《孤独摇滚》</a>的 live 曲<a href="https://www.bilibili.com/video/BV1sv4y1U7j6/?spm_id_from=333.337.search-card.all.click">《吉他与孤独与蓝色星球》</a></p>

https://alphardex.github.io/mygo/posts/54631/ 2022-11-04T00:58:00.000Z 2024-05-23T01:59:11.884Z

<p>呀哈喽！这里是 alphardex。</p> <p>之前我写过一篇<a href="https://juejin.cn/post/6967162668595544095">液晶球相关的文章</a>，里面是用顶点着色器和片元着色器来实现液晶球效果的，不过呢，之前同样写过一篇<a href="https://juejin.cn/post/6934461126977519629">Raymarching 相关的文章</a>，于是乎我在想能不能把这两种方法给结合起来，实现一个第二版的液晶球呢，经过几天的实验，最终写出了如下的效果（全屏打开最佳）：</p> <p><a href="https://code.juejin.cn/pen/7161774000031399943">https://code.juejin.cn/pen/7161774000031399943</a></p> <p>本文将简要地介绍一下实现这个效果的思路</p>

https://alphardex.github.io/mygo/posts/8368/ 2022-10-29T07:52:00.000Z 2024-05-21T12:46:19.016Z

<p>哟哈喽！这里是 alphardex。</p> <p><a href="https://www.agemys.net/detail/20220142">Lycoris Recoil</a>，又称“莉可丽丝”或“石蒜”，是笔者最近追完的一部番。这部番主要还是看美少女贴贴的日常，不论是 OP 的击股之交，泷奈的 Sakana~还是千束神一般的闪避能力等都令我记忆犹新。尽管后面几集剧情可能有点争议，但不影响我对这部番的喜爱。</p> <p>目前还有在追的一部新番<a href="https://www.agemys.net/detail/20220121">孤独摇滚</a>也不错，女主社恐的性格真的跟我十分相似（悲）。</p> <p>最近我心血来潮，想为石蒜这部动画做一个自制的人物介绍页面，素材借用的是<a href="https://lycoris-recoil.com/character/">动画官网的素材</a>，原本想做一个简单的包含 CSS 动画的 Swiper 滑动展示页，但转念一想，既然一直在研究 WebGL，为何不搞点更炫的东西呢？于是乎，借助我的框架<a href="https://github.com/alphardex/kokomi.js">kokomi.js</a>之力，我成功地将一个普通的 HTML 页面一步步地转化为了一个拥有酷炫交互的 WebGL 页面。</p> <p>页面链接在下方，点击右上的 logo 全屏观看，效果最佳：<br><a href="https://code.juejin.cn/pen/7159562292110032900">https://code.juejin.cn/pen/7159562292110032900</a></p> <p>本文并不会详细地去教大家如何完整地做出整个页面的效果，而是来谈谈 HTML 转 WebGL 的方法以及 WebGL 特效的一些常用技法。</p>