check the highlights tab - email: ab@verse.sh
Joined February 2017
- Tweets 3,197
- Following 1,668
- Followers 4,430
- Likes 72,983
512 Photos and videos
Left: Normal ASCII shader
Right: Shape-aware ASCII shader
ASCII characters are chosen based on their shape, so you get clearer edges
Vectors are calculated and compared with WebGPU compute shaders
It's based on an altered version of Alex Harri's approach. I'll link below
33
450
8,182
305,446
abdullah retweeted
May 28
『METAL SLUG』の開発中、魔法使いと呼ばれていた天才プログラマー、ANDY君が作ったドット絵エディター『キャメル』。
それは、まさにドッターたちにとって、夢のようなツールでした。
その名前は、当時ANDY君が好きだったタバコ『Camel』から取ったもの。
ツールのアイコンには、タバコのパッケージに描かれているヒトコブラクダ『オールドジョー』を、ANDY君自らドット絵で描き起こしたものを使っていました。
アイレムで使っていたドット絵エディター『さだやんペイント』には、『海底大戦争』でSUSUMU君が表現していた水中背景の揺らめきのような、ラスタースクロール表現を簡単に作れる機能があったんです。
その機能は『キャメル』にも引き継がれており、『METAL SLUG』でも、砂漠の遠景を陽炎のように揺らす表現などに使っていました。
その機能を使い、さらに一歩踏み込んだ表現として作られたのが、UFOが放つトラクタービーム等のエフェクトです。
トラクタービームの絵は、ビームの形と重なる背景の絵をそのまま使い、その絵のカラーパレットを、発光して見える数種類のカラーに入れ替えながら、さらにラスタースクロールをかけることで、ビームを通して見た背景が揺らいで見えるように表現しているんです。
このエフェクトを作ったのは、ドッターのTOMO君なんですが、UFOと背景の座標を完璧に一致させないと、なんちゃって半透明に見えなくなってしまうので、TOMO君は敵配置担当のmeeher君に、こう念を押しました。
「ビームエフェクトを1から作り直しになってしまうから、UFOと背景の座標は絶対に変更するなよ！」
すると、meeher君は、
「わかった、絶対に変えない」
と言っていたんですが、数日後UFOの位置を変えてしまいます。
meeher君は、TOMO君が、とんでもない手間を掛けてあのエフェクトを作っていたことを理解していなかったようで、めちゃくちゃ怒られていました。
あの頃のTOMO君はスケジュール度外視で、納得がいくまで時間を使ってしまうドッターだったので、通常の担当作業に組み込むのは難しかったんです。
そこで、後輩たちの絵の手直しや、クオリティアップに繋がる作業を、やりたいようにやらせていました。
手が遅くても良い仕事をするクリエイターには充分な時間を与え、作品全体のクオリティアップに努めてもらう。
そういう贅沢な人員配置も、メタスラの拘りの一つかもしれません。
あの半透明に見えるエフェクトは、そうやって時間を気にせず動ける存在と、『キャメル』があったからこそ生まれた表現なんでしょうね。
#METALSLUG #PixelArt #retrogaming
106
2,481
9,396
777,346
Left: Normal ASCII shader
Right: Shape-aware ASCII shader
ASCII characters are chosen based on their shape, so you get clearer edges
Vectors are calculated and compared with WebGPU compute shaders
It's based on an altered version of Alex Harri's approach. I'll link below
33
450
8,182
305,446
The way I build the vectors is slightly different:
The screen is divded into cells. Then I divide those cells into a subgrid. The average luminance of each cell in the subgrid is what I use to build the vector
I think the math also differs in some places because it all runs in compute shaders
alexharri.com/blog/ascii-ren…
3
3
118
10,322
I found this list of Three.js performance tips from @utsuboco. quite helpful
utsubo.com/blog/threejs-best…
6
898
The reality is that if you don't know what you're doing, you won't know how or when you're digging yourself into a deeper hole
And Claude doesn't help, it responds to everything you say with "Great idea! That's actually really clever! You're so smart!" so you can't even be saved
1
3
494
abdullah retweeted
14 Aug 2021
ignore everything (everyone is crazy) and get more skills
78
686
3,386
another plus is that if you combine a shadow border (i.e. `ring` in tailwind), with a normal shadow, they'll blend
it looks a lot nicer than a normal css `border` with a shadow
27 Nov 2025
Do this one trick in @jakubkrehel's article about shadows and you'll 10x your design chops.
jakub.kr/work/shadows
4
14
539
70,400
abdullah retweeted
24 Nov 2025
The things you make are better networkers than you
68
185
1,120
145,887
LLMs try to make their own lives easier by adding "use client" to the top of every file and preferring to use hooks in client components
they've seen this hooks-based code in their training data way more than RSC code
this is destroying SEO for new sites because nothing is SSR'ed. the client receives nothing in the HTML and content only renders via JS
some teams are unaware that this is even happening to them because they're not reviewing LLM-written code
1
4
1,453
relevant x.com/jacobmparis/status/171…
24 Oct 2023
Red flags in a React codebase
🚩 functions named handleClick,handleSubmit
🚩 preventDefault
🚩 useMemo
🚩 fetch inside useEffect
🚩 <div onClick/>
🚩 a "hooks" directory
🚩 css files
🚩 icon library in package.json
1
811