スクラッチ アイコン

おしゃれを楽しむスクラッチです。最近僕もアバターを作ることが多いのですが、目の色を変えたり髪型を変えたり服を変えたり、キャラを作り上げる楽しみに目覚めています。

そこに来てこの素晴らしい作品です。まさにアバターを作るように目の色を変えたり髪型を変えたりできます。自分の理想を作り上げることができます。

こういうカスタマイズ系の作品は、作ってみると分かるのですが終わりがないんですよね。だからこだわると数週間以上かかることもザラです。この作品もカスタマイズの種類の多さから、かなり時間と力を使ったろうなと分かります。

自分だけのキャラクター作成ツール

このツールを使って、キャラクターやアイコンをデザインできます。デザインが終わったら、カメラボタンでスクリーンショットを撮るか、保存ボタンでコードを取得して保存できます。

さらに、スプライトを変更して自分のデザインを追加することも可能です。新しいコスチュームを作成し、リミックスして保存すると、グリーンフラッグをクリックすることでスタイルのリストに表示されます。

可愛いアイコンを作ろう！

このゲームは、スクラッチキャットのアイコンをカスタマイズできる楽しいクリエーターです。4種類のスキンや7つの顔、帽子、持ち物、靴、さらに14種類の背景を選んで、76,832通りの組み合わせを楽しめます。操作は簡単で、アイコンをクリックするだけで変わります。スマホでも遊べるので、どこでも気軽に楽しめますよ！

カスタムアイテムと色変更が楽しめるゲーム

このゲームでは、黄色いヘビをたくさん操作しながら楽しむことができます。マフラーの色を「C」キーで変更したり、アイテムの追加をリクエストすることも可能です。ゲームは全画面モードでのプレイが推奨されています。詳細はコード内にサムネイルとして記載されています。

君のオリジナルアイコンが矢印キーで瞳を自由に動かせるって知ってた？このスクラッチでは、キー入力で瞳の座標を細かく制御して、上下左右どの方向でも自然な視線を作れるんだ。さらにすごいのは、髪の色と明るさをマウスドラッグで調整できるカスタムスライダー機能。マウス座標を変数値に変換する計算処理で、直感的な操作を実現してる。作ったアイコンは専用コードで保存・読み込みもできて、文字列操作を駆使したデータ管理システムも見事だよ。

最大の特異点はなんといっても、あの"画像スキャン処理"だよ！このスクラッチでは、画像を点で走査して白黒の情報を配列に格納する方法がすごいんだ。スプライトがコスチュームの各ピクセルに触れているかを判定し、その情報を「2倍元画像」というリストに保存してるんだよね。

特にこだわったのが座標計算部分！スキャンしたピクセル情報を正確に変換するために、三角関数を駆使して回転や変形にも対応させているんだ。そして「滑らかモード」をオンにすると、周辺ピクセルを参照して輪郭をぼかす処理が走る。これがあの初期アイコン特有のふんわり感を再現してるんだよね。

使ってみるとわかるけど、細かい調整で自分だけのアイコンが作れるのがポイント！一見複雑だけど、工夫次第でどんな画像も味のある初期アイコン風にできるよ。

このスクラッチのすごいところは、データの保存と読み込みの仕組みなんだ！よく見ると、「セーブ」関数がリストにアイコンのパーツデータを「▲」で区切って追加していくんだよね。これを文字列として出力して、ユーザーがコピーできるようにしている。そして「ロード」関数では、入力されたテキストを「▲」で分割して、各パーツのデータに戻す仕組み。

実はこれってすごく賢い方法で、スクラッチは普通プロジェクト間でデータの受け渡しができないけど、この方法なら作ったアイコンを文字列として保存して、あとで読み込める！クラウド変数がない環境でも、作ったアイコンを保存できるんだ。

さらに、コピーをしやすくするために「トリプルクリック」のヒントまで表示してる。ユーザー体験をしっかり考えてるね！

自分好みのカービィの表情やカービィが作れます。
とにかくかわいいです。カービィの表情はいくつか種類があるので、ニコニコのカービィを作りたいのか？目がパッチリのカービィを作りたいのか？自分の気分に合わせて作ることができますよ。
表情の他には口の色を変えることができたり、舌を出す、カービィに何かアイテムを持たせるなどできます。
どんなアイテムがあるかはこのゲームを実際にしてみてください。

PNGの画像データ構造を理解し、ヘッダーからチャンク（IHDR、IDAT、IEND）までを一から生成しているんだ！これがすごいところなんだよね。普通はこういった画像処理はブラウザやOSの機能に任せちゃうけど、このスクラッチではビット単位で画像データを構築してるんだ。特にIDATチャンクではzlib形式の非圧縮Deflateを生成して、さらにCRC32チェックサムまで計算してる。完成したらBase64形式に変換してデータURLとして出力するから、アドレスバーに貼るだけで透過画像が表示されるっていう仕組み。かなり技術的に凝った作品だよ！

あつ森の住民が作れます！住民と言っても基本は人間です。だけど洋服や髪型、顔や肌を自由自在に変更できる。しかもクリックだけで！カンタンで嬉しい。最後はアイコンに使ってねと言わんばかりに切り取り用の枠まで用意してくれている徹底的なサービス精神に脱帽です。ためしに作ってみました。#### TIPS注意点として、右下にあるサイコロ。これを押すとランダムで全部変わって楽しいのだけど、自分のお気に入りの子を作ってる途中でサイコロを押してしまうと元に戻せないので注意。サイコロ押すなら一番最初や、やり直すときがいいと思った。あと切り取り方（スクショ）が分からない人のためにWindowsウィンドウズとMacマックの切り取り方をカンタンに載せておくね。- 使ってるパソコンがWindowsウィンドウズなら、キーボードの左下あたりを見て、「Windowsウィンドウズキー」と「Shiftシフトキー」と「Sキー」を同時に押すと、切り取り画面になるので、好きな場所をドラッグすれば切り取れる- 使ってるパソコンがMacマックなら、「Shiftシフトキー」と「⌘Commandコマンドキー」と「数字の４」を同時に押すと、切り取りモードになるよ。

女の子のイラストでいろいろなアイコンを作れるアイコンメーカー。表情、髪型も豊富で、これだけのパーツを作るのは大変だったろうなと思います。メガネやモノクルなどの小物もあり、禰●子の竹まで用意されている！グラデーションアイコンを使うと明度や彩度も変えられるので、同じパーツでもかなり印象を変えられます。カメラアイコンから下矢印アイコンでセーブできますが、指示どおりダブルクリックで文字列が選択されてからコピーしてくださいね。お気に入りのアイコンが作れたらスクショして使ってみましょう！