Try   HackMD

マウスカーソルを作ってみたお話

はじめに

以下の話は Windows 10 を前提に行うものとする.
また,制作者は初心者であるため,細かい内容は大目に見ていただきたい.

使用ソフト

RealWorld Cursor Editor

工程

1. 大体の案を思い浮かべる

カーソルのサイズは 32 x 32,または 48 x 48 が使用できる.
これを踏まえてとりあえず描画ソフトで案を思い浮かべるとよい.
今回は私が推している ななひら さんのカーソルを作ってみることにした.
(以下は過去に私がモデルを参考に作ったVroid形式のものである.これをもとにドット絵を作成した.)

Image Not Showing Possible Reasons
  • The image was uploaded to a note which you don't have access to
  • The note which the image was originally uploaded to has been deleted
Learn More →

2. RealWorld Cursor Editorでドット絵を描く

私はドット絵の描き方など分からなかったのでひたすら手を動かすしかない.
意外と形にはなっていた.私は最初に 48 x 48 から描き始めた.(理由は後述)

機能紹介

Image Not Showing Possible Reasons
  • The image was uploaded to a note which you don't have access to
  • The note which the image was originally uploaded to has been deleted
Learn More →

順番に紹介する.

  • ホットスポット

    • カーソルの判定位置を変更
  • フレーム時間

    • アニメーションで使用するフレーム時間のコントロール
  • プレビュー

    • アニメーションの動きやカーソルの色合いなどの確認
  • 下の白い枠

    • アニメーションのフレームを順番に表示
    • フレームのコピー,貼り付け,削除
    • 回転アニメーションの作成
    • アニメーション速度の調整
  • 右の大きな四角

    • ここにドット絵を描画
  • 四角の上のアイコン列

    • 消しゴム → 左から 2 個目のアイコン
    • ペン → 左から 4 個目のアイコン
    • 塗りつぶし → 左から 6 個目のアイコン(画像で選択されている)
  • ツールプロパティ

    • パラメータの設定
  • 塗りつぶし

    • 色の設定
  • レイヤー

    • レイヤーの分割時に使用

ちなみに必要な絵の数は15個である.大変だった.
アニメーションを作成するならさらに多くの絵が必要である.ヒエー
以下に作成した各ドット絵を並べておく.(アニメーション用の差分もあるが冗長になるのを避けるため割愛する)

Image Not Showing Possible Reasons
  • The image was uploaded to a note which you don't have access to
  • The note which the image was originally uploaded to has been deleted
Learn More →

(1) 通常の選択

Image Not Showing Possible Reasons
  • The image was uploaded to a note which you don't have access to
  • The note which the image was originally uploaded to has been deleted
Learn More →

(2) ヘルプの選択

Image Not Showing Possible Reasons
  • The image was uploaded to a note which you don't have access to
  • The note which the image was originally uploaded to has been deleted
Learn More →

(3) バックグラウンドで作業中

Image Not Showing Possible Reasons
  • The image was uploaded to a note which you don't have access to
  • The note which the image was originally uploaded to has been deleted
Learn More →

(4) 待ち状態

Image Not Showing Possible Reasons
  • The image was uploaded to a note which you don't have access to
  • The note which the image was originally uploaded to has been deleted
Learn More →

(5) 領域選択

Image Not Showing Possible Reasons
  • The image was uploaded to a note which you don't have access to
  • The note which the image was originally uploaded to has been deleted
Learn More →

(6) テキスト選択

Image Not Showing Possible Reasons
  • The image was uploaded to a note which you don't have access to
  • The note which the image was originally uploaded to has been deleted
Learn More →

(7) 手書き

Image Not Showing Possible Reasons
  • The image was uploaded to a note which you don't have access to
  • The note which the image was originally uploaded to has been deleted
Learn More →

(8) 利用不可

Image Not Showing Possible Reasons
  • The image was uploaded to a note which you don't have access to
  • The note which the image was originally uploaded to has been deleted
Learn More →

(9) 上下に拡大/縮小

Image Not Showing Possible Reasons
  • The image was uploaded to a note which you don't have access to
  • The note which the image was originally uploaded to has been deleted
Learn More →

(10) 左右に拡大/縮小

Image Not Showing Possible Reasons
  • The image was uploaded to a note which you don't have access to
  • The note which the image was originally uploaded to has been deleted
Learn More →

(11) 斜めに拡大/縮小 1

Image Not Showing Possible Reasons
  • The image was uploaded to a note which you don't have access to
  • The note which the image was originally uploaded to has been deleted
Learn More →

(12) 斜めに拡大/縮小 2

Image Not Showing Possible Reasons
  • The image was uploaded to a note which you don't have access to
  • The note which the image was originally uploaded to has been deleted
Learn More →

(13) 移動

Image Not Showing Possible Reasons
  • The image was uploaded to a note which you don't have access to
  • The note which the image was originally uploaded to has been deleted
Learn More →

(14) 代替選択(使う場面見たことないけど)

Image Not Showing Possible Reasons
  • The image was uploaded to a note which you don't have access to
  • The note which the image was originally uploaded to has been deleted
Learn More →

(15) リンクの選択

さて,次は 32 x 32 もう一回描く?

3. 32 x 32 のドット絵を作る?

ここまで作業するとかなり疲れるが仕事は終わらない.
質を求める人はサイズが小さくなったバージョンも描いた方がいいが,初心者には厳しい
そこで楽をした.
具体的には48 x 48 のドット絵をコピーして貼り付け,もちろんはみ出るので,うまく縮小
たったこれだけ!楽~!

こだわるなら縮小後に修正してもよいだろう.

4. .ani で書き出し

ファイル → 名前を付けて保存から名前を適当につけて保存!
cur (アニメーションなし) で書き出したい場合は書き出し形式を下の方で変更可能だ.

5. 作成したカーソルの設定

Cursors というフォルダに ani ファイル(又は cur ファイル)を入れる.
たぶん,Cドライブ直下から Windows → Cursors だと思う.
設定 → デバイス → マウス → その他のマウス オプション → ポインター → カスタマイズの参照から先ほど入れた ani (cur)ファイルを選択.

最後に適用すればおしまい!

おわりに

ここまで読んでいただいたことに感謝申し上げる.

初心者の私が色々試行錯誤しながら頑張ったマウスカーソル作りの記事であったが,これを見たまだマウスカーソルを作っていない人の助けになればよいと考える.

推しのマウスカーソルがない!
そんなあなたがマウスカーソル作りに挑戦することを楽しみにしている.
(2024/04/27 記事執筆者 : Thike)

04/28 追記 : 違和感のある部分を少し編集したため画像を一部差し替えました.