見出し画像

はんにゃーのぼうけん

神楽坂らせん

面白そうなものみつけたので作ってみる

先日、ついったーで↑こんなすてきなものを見つけたので、自分でも実装できないかなあって色々苦労した日記＆やったこと備忘録です。簡単そうに見えて意外と大変だったのでした。

目的地（完成系）がしっかりわかっているので、ばしっとそこへ向けていければ、たとえ長い道のりでもいつかはたどりつける、なーんて、最初は思うのですけど、いろんなところに壁やら落とし穴やらがあってぶつかるたんびに道を変えてさんざん放浪し迷った挙句にようやくたどり着けたかんじですｗ

なんせお経だけにまるで、ありがたいお経をいただきに天竺に行くような……ってそこまで大変じゃないですけどｗ
まっすぐ西へ向かえばいいものを、気が付けばいろんな本面へ中途半端に突撃しては撤退してましたねえｗ

名称未設定 1

それぞれの言語（や開発環境）の特徴を知っていればこんな苦労はないのでしょうけど、世界のすべてを知る賢者でもない初心者的には、やっぱりどれがいいかわからない状態からスタートするのは仕方ないことなのかもしれません。

そういう多数の言語を横断した入門書ってあるのかなあ。見たことないけど（ほら、ここに需要がありますよ！ｗ＞編集者さん）

とにかく使える武器（無料で、ですが）をじゃんじゃん使って手を変え品を変え試行錯誤した記録的なノートを残しておきます。

そんなわけで、結論から知りたい方は目次から全部すっ飛ばして最後のほうだけご覧くださいませ☆

※目的地があって、数々の困難を乗り越えてたどりつく。これって、キャラクターを作って言語の国を旅するお話に仕立てたらファンタジー物の素材になるかもですね！ｗ
これ以降特に説明なくプログラムの専門用語等がどかどかでてきますが、それぞれ適当に読み替えてご覧いただくと、ある意味ファンタジーとして読んでいただけるかもしれません……？　無理かな？ｗ

まずはPython国へ？

日本語・漢字。じゃ、簡単につくれそーだしPython3でやってみるかな？

と最初は思ってPythonで実装しはじめる。

とりあえず、

仏説摩訶般若波羅蜜多心経　観自在菩薩行深般若波羅蜜多時　照見五蘊皆空　度一切苦厄　舎利子　色不異空　空不異色　色即是空　空即是色　受想行識亦復如是　舎利子　是諸法空相　不生不滅　不垢不浄　不増不減　是故空中　無色無受想行識　無眼耳鼻舌身意　無色声香味触法　無眼界　乃至無意識界　無無明　亦無無明尽　乃至無老死　亦無老死尽　無苦集滅道　無智亦無得　以無所得故　菩提薩埵　依般若波羅蜜多故　心無罜礙　無罜礙故　無有恐怖　遠離一切顛倒夢想　究竟涅槃　三世諸仏　依般若波羅蜜多故　得阿耨多羅三藐三菩提　故知　般若波羅蜜多　是大神呪　是大明呪　是無上呪　是無等等呪　能除一切苦　真実不虚故　説般若波羅蜜多呪　即説呪曰　羯諦羯諦波羅羯諦波羅僧羯諦菩提薩婆訶　般若心経

というとってもありがたいテキストファイルを作って、Pythonで読みこみっと。

色々つくりながら試そうと思って、Jupyter Notebookで始めます。

※JupyterNotebookはノートのように書きながらそのノート上でプログラムを実行できる素敵なやつです。

画像1

まあ、テキストファイルの読み込みは問題ないよね。

しかし、漢字を巨大化させて表示させるのにいきなり苦戦。

こんなの見つけてきたけれど、これって単に画像ファイルを作っておいて表示させてるだけの模様。

こういったGUIライブラリを使ってラベルとして表示させてみるのも一つの方法かな、と、

PyQTやPILを試すけれど、漢字表示できなかったり画面のリフレッシュに手間取ったり。

結局、最初に数字の画像ファイルをランダムに出していた人のようにイメージデータを作成して、それをその都度表示させるようにしないといけないのかなぁ。といろいろ検索。

OpenCVで漢字の表示用ファイルを作り、表示まではできたけれど、

画像2

うまく表示ウィンドウをリフレッシュ（パラパラ漫画みたいに毎回画像を作って出す）のが作れず、そろそろ面倒になってこの方向は断念ｗ

※後から考えたらJupyter Notebookのせいだったかも？

HTML5ちほー

漢字が書けて拡大縮小自在にできて……といったら、HTML5が流行りのよう。
ただこれ全貌はよくわかってないのよね。HTMLといいつつ、HTMLだけじゃなくてCSSとJavaScriptとかファイルを分けて（一緒にすることも可）作んなきゃいけないし、Java由来でやたら関数やコマンド（とは言わないか）名が長いのも、ちょっと苦手。
と、苦手意識先行で今まであまりちゃんと勉強していなかったんですよねー。

とりあえず、文字の拡大・縮小と共に位置を変えて描画して、書き換えの実験

かなり高速（で読めないｗ）に書き換えができることはこれでわかったわｗ
しかし、この操作をマウスのホイールで行おうとしたのですが…

どんなにゆっくり動かしても、マウスのホイール１ノッチ分で５回はイベントが発生している？かんじ？　調整難しいなぁー＞＜

そのうえIEとChromeだと動作ちがっちゃうみたいだし。うー、めんどい！

ただ文字の大きさと位置を重ねているだけ（z-orderを変えている）なだけなので、動きもうつくしくないなあ。ランダムに手前の位置を振り分けたりしたいし……。

そもそも設計段階で間違えている気もしないでもないですが、なんとなくめんどくささが増してきてHTML5も諦めモードに。（あんまりJavaScript得意じゃないのですー＞＜）


アニメーションならUnityじゃん？

なんか乗り換えてばっかりですが、もともとゲーム制作用のUnityだったら３Dも得意だしマウスからコントロールなんてあたりまえにできそう。こっちでやってみよっかなー。

文字を表示するだけのオブジェクトを作って、インスタンス３D空間に並べて、Z軸方向へ移動させていけば行けそう。

画像15

とうだうだ考えて、

このあたりを予習。

Prefabで文字を生成する型を造って、それのインスタンスでずらっと並べればいいかなと考え

や

このあたりを参考に

このフォントを使って

画像3

「あ」とだけ書かれたオブジェクトを作ってPrefabにして、

画像4

こんなかんじのインスタンスを生成

画像5

ここまではおけ。

ではこれを大量生産してみます

画像6

こんなかんじ。軽く１００個Z軸方向に、XとYはちょっとずつランダムでブラして

画像7

どりゃー「あぁぁぁああぁ‥‥」

画像8

こんなかんじで並んでいるわけです。この「あ」の並びの中を視点（カメラ）が動けばよいですね♪

インスタンス中の文字を書き換え

インスマスじゃないです、インスタンスです。

「あ」のままでもある意味面白そうですけど、やっぱりもっとありがたい言葉に書き換えねばなりません。

// インスタンスを生成
GameObject obj1 = (GameObject)Instantiate(obj, new Vector3(0.0f, 2.0f, 0.0f), Quaternion.identity);
// インスタンス内のTextコンポーネントを書き換え
obj1.transform.Find("Canvas/Text").gameObject.GetComponent<Text>().text = "abc";

最初、こんなかんじでインスタンス内のテキストを書き換えようとしてみたのですが、これがまたなかなかうまくいきません。↑はエラーになっちゃいます。なぜー？

Canvasの子供のTextだから、孫よね。と、これでいいのかなーとか

子どもたち（Children）を全部取得して書き換えなきゃいけないのかなーとか、やたら試行錯誤して、

この情報にたどり着きました。ふむう、Prefabにアタッチしたスクリプトの中でテキストを書き換える部分を作って、そこに文字を送り込めばいいのかな。と、

画像9

こんなのを作って、Prefabにアタッチしてみたのですが、やっぱりエラー……。

うーん、また壁かあ。くまった＞＜

どうしたらいいのでしょう……？

この冒険旅行は仲間もいなければ（Webの情報検索以外）導手（グル）も先生もいない孤独な旅です。自分で解決せねばなりません。

また壁にぶつかったからって今更PythonやHTMLにもどるのもなあ、としばし悩み、雨の中お散歩したりして頭を冷やし、帰ってからもういちどエラーメッセージを見ると

画像10

error CS0246: The type or namespace name 'Text' could not be found (are you missing a using directive or an assembly reference?)

え？ Textなんて知らない？？　どういうこつ？？
うわ、Textが usingされてないじゃん！　私ってほんとバカ！

というわけで、

using UnityEngine.UI;

を頭に入れると無事動作。インスタンスでも文字を書き換えられるようになりました。やったあーーー！(∩´∀｀)∩☆

ここまで動いたら後は早いです。

ありがたいテキストをStringで作っておいて、一文字づつパネルに張り付けて表示するようにして

画像11

画像12

こんなかんじ。もうこの段階でありがたそう！

それに、マウスホイールでスクロールするように

こちらの呪文を MainCameraにアタッチして、（速度遅かったので ×500 するように設定変更して）

画像13

実行すれば、ほら、

できた！

↑最期にテスト用の「あ」ってのが出てくるのはご愛敬ｗ

長い旅の末に、ようやくありがたいお経を手にすることができました☆

なんだかんだですぐできるとおもったけど一週間ぐらいかかってしまったわー。

ところで、Unityってスマホやタブレットでも実行できるんですよね。これを自動的にぐるぐる回るモードにしておいて動作させておいたら、デジタルマニ車になってくれるかも？ｗ　（電池喰いそうだけどｗ）

―――

旅の終わりに

いつもは「何々を使って作る！」とかまっすぐ一つの方面に突き進んで技術の無駄遣いという遊びをしているのですがｗ

今回はまっすぐではなく、うろうろ放浪する意味で時間と技術の無駄遣いをした気がします……。

が、まあ、これも経験、それこそが尊い教えになるのじゃよー。とオチャカ校長あたりはおっしゃってくれそう、くれるかな？　くれたらいいな？

というかんじですかね。

ともあれ、それもこれもすべては原稿書きからの現実逃避だったということに、完成したありがたいお経をぐりぐりして眺めながら( ﾟдﾟ)ﾊｯ!と気が付くやっぱり時間の無駄遣いな日々でした。ダメじゃん！！＞＜

―――

※なお、このプログラムのおおもとは最初に紹介した Satoshi Kojima さんの『クランク般若心経』で、それを見た目だけでてきとーに真似したものです。（なのでソース等は公開しません）あくまで興味から自分の勉強用にやってきた冒険のきろくということで、ひとつ、よろしくなのです。

いいなと思ったら応援しよう！

神楽坂らせん
よろしければサポートお願いします！いただいたサポートはクリエイターとしての活動費にさせていただきます！感謝！,,Ծ‸Ծ,,

この記事が参加している募集

#おうち時間を工夫で楽しく

95,676件