Help us understand the problem. What is going on with this article?

hyper-pokemonにアジョットを追加する

More than 1 year has passed since last update.

Screenshot_20171207_230228.png

これを
Screenshot_20171207_230318.png
こうする

準備

まずhyper-pokemonをforkしてcloneした。clone場所は$HOME/.hyper_plugins/local/hyper-pokemon。その後、リポジトリに移動し、yarnを実行。
その後.hyper.jsに、以下のように記述。

.hyper.js
  // in development, you can create a directory under
  // `~/.hyper_plugins/local/` and include it here
  // to load it and avoid it being `npm install`ed
  localPlugins: ["hyper-pokemon"],

さらに、pluginsから"hyper-pokemon"を削除する。

このhyper-pokemonが、$HOME/.hyper_plugins/node_modulesにあるという前提になっているので、symlinkを張る。

$ cd ~/.hyper_plugins/node_modules
$ ln -s ../local/hyper-pokemon/ hyper-pokemon

これで、local/hyper-pokemon内で開発できるようになった。以下では特に断わらない限りカレントディレクトリをlocal/hyper-pokemonとする。

アジョットの背景画像の準備

背景画像は1920x1080pxなので、1920x1080pxの画像をInkscapeで制作する。
アジョットの背景
Pixabayで見つけた成人男性の裸のベクタ画像と、Wikipediaで見つけたアジのスケッチを組み合わせてクソコラを作った。

アジョットの背景画像の設定

pokemon.ymlに、adgeotを追加

pokemon.yml
     tertiary: '#BA5F79'
     unibody: '#F4C6D3'

+  # Fanmade Pokemon
+  adgeot:
+    primary: '#515151'
+    secondary: '#BF6B34'
+    tertiary: '#DEAA87'
+    unibody: '#172F5C'
+
 ##
 # Default values
 ##

こちらの環境では、unibodyが背景(つまりウィンドウ枠)、secondaryが文字の色で、tertiaryが強調する文字の色。primaryは知らん。
tertiaryがアジョットの肌の色、secondaryがその影の色である。気色悪さを出したかったのでsecondaryを肌の色にしようかと思ったが、そうなるとtertiaryが強調文字が見にくいという逆転が起きたのでこのようにした。基本的に背景画像から色を取ったが、それだと見にくかったので色々調整した。

アジョットのアイコンGIFの準備

ポケットモンスターVIPのWikiで見つかった画像を適当に弄って、以下のような64*64pxの画像をまず作った。
adgeot0

これをGIMPで開き、GIF動画に変換する。まず1つ目の画像をずらして2つ目の画像を作る(この画像は1pxしかずれていないので分かりづらいが)。
adgeot2

これらをGIMPでレイヤーとして開き、adgeot.gifでエクスポートする。するとGIF画像としてエクスポートする際に設定画面が出るので、「アニメーションとしてエクスポート」をONに、「指定しない場合のディレイ」を340ミリ秒に、「指定しない場合のフレーム処理」を「レイヤー毎に1フレーム(置換)」にそれぞれ設定する。
adgeot-gif

これをpokecursorsディレクトリに突っ込んだ

完成

Screenshot_20171207_230318.png

反省点

  • 背景色をもうちょっと淡くするべきだった
    • でも大海感も出したかった
  • あきらめないでSVGでアジを描くべきだった
  • 大百科によるとアジョットの綴りはAjotだったが、全部Adgeotで書いてしまった
  • なぜ私はポケモンをやったことがないのにこんな記事を書いたのか

まとめ

オリポケをhyper-pokemonに追加するには、

  • 背景
  • 64x64のGIFアイコン
  • 文字配色

を作ればできる。

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした