つきすけ の コーディング記

細かいところで嫌にならないように、小さいことでも解説していくブログ。たまに関係ないことも書く。

【第零回】(基礎の基礎の基礎の基礎くらい)0からプログラミングについて勉強する

『経験値がバラバラで未知数。パソコンを深く扱っていない人もいるかもしれない』

と言う場で、プログラミングについて教えてみたい。

一体何から話すべきなのだろうか?
悩みに悩んだが、まずは大事な大事な、すっごく基礎的な概念から行こうと思う。

忙しい人向け

※これで理解できる場合、この後はすっ飛ばしてよし。

プログラムとは、
コンピュータに計算などの依頼をすること。

1 + 1は? 
#「2」

a = 1
b = 2
a + bは?
#「3」

以上



プログラムとは何か

※結論「CPUに命令すること」

コンピュータに「これやって」とお願いするもの。

※これより、コンピュータのことはCPUって呼ぶことにします。


例えばこんなお願いをする。

1 + 1

するとCPUは答えてくれる。
CPU:それは「2」です。



もちろん、CPUはもっと賢いので、もっと色々できる。
例えば、

a = 1

と命令すると、a は 1 のことなんだと覚えてくれる。

だから、この後にはこんなお願いも聞いてくれる。

a + 1

答えは?
CPU:「2」です。




CPUは記憶力がいいので、もっと色々言っても覚えられる。
例えば、

a = 1
b = 2
c = 3

こうして3つの数字を覚えてもらった。
そしてこうお願いする。

a + b + c

答えは?
CPU:「6」です。



以上

信じられないかもしれないけれど、プログラムというのは、こんなことをひたすらやっているだけである。

CPUが人間じゃ想像できないほど賢く、頭の回転が速すぎるだけで、中身はこんなものである。

人間には覚えられないような膨大なことを記憶してもらって、
それらを使って、人間にはできないようなすごーい大変な計算をしてもらう。


それだけなのだ。

大事な大事なお話でした

たったこれだけのことですが、本当に大事な概念です。
今後も、絶対にこの本質を見失わぬようにいてください。

ルビの位置が文字に近すぎる問題をcssだけで解決する

基本のルビの書き方

<ruby>
 漢字
 <rt> かんじ <rt>
</ruby>

こうすると、なんかルビの位置が漢字に近すぎる。
どうするか、あまり対策が載っていない。
そこでこうしてみた。

まずHTMLの漢字をspanで囲む。

<ruby>
 <span>漢字</span>
 <rt> かんじ <rt>
</ruby>

CSSをこう書く

span {
 display: block
}

まあつまり、漢字の部分がblock用紙になれば良いわけだから、pとかでもいけると思う(未検証)

いやあ、頑張った頑張った。

普通の日記 22/11/24

コーディングには関係のない、普通の日記です。

月助です。

過去は狂ったように記事を更新していましたが(Tkinter辺り)、時も経てば身分も変わり、なんとなく減ってきました。

たまに新たにやってみようと何か試みても、記事にする気が起きたり起きなかったり。

ただ、意気消沈していた頃からは少し回復。
ブログを生き返らせるためにも、日常的なことを書きつつ、コンテンツを増やそうと思います。

ちなみに現在の僕はうさぎに敷かれています。

Ren'py 画像サイズを変えて表示したい。

画像サイズを変えて表示したい

立ち絵の大きさ

おそらく立ち絵はこんな感じで書かれている。

show kagami normal at right

それを二倍の大きさにするために、書き足す。

show kagami normal at right:
 zoom 2.0

こうなる。

背景画像の大きさ

なかなか調べるの大変やったなあ。
とりあえずタイトル画面のところの部分を紹介。これができればどこでもできる。
gui.rpy のところにこんな行があるよの。

define gui.main_menu_background = "gui/****.jpg"

これをこうする。

define gui.main_menu_background = im.Scale("gui/****.jpg", 1920, 1080)

ちなみに、1920, 1080というのはスクリーンサイズ。
これが変わる可能性があるならすこしやっかいなので、gui.rpyの最初の行とかで変数にしておいたほうがよいでしょう。

ちなみに普通のPython書いている時と違って、変数定義はかならず define を付けます。

define height = 1080

みたいに。

すごいこと発見した

背景画像にも center とか right とかが使える。
つまり、

scene bg 1 at center:
 zoom 0.8

的なこともできるわけです!
便利!

Ren’py について、そこそこ躓いたところ

キャラクターの「表示名」どうする?

現在僕は、kagami というキャラクターを使用しようとしている。
画像の名前は kagami normal.png
日本語で「各務」と書きたい。

これはキャラクター定義の際に変更する。

define k = Character('各務', color="#c8ffc8")

このとき作った k という変数を使い、セリフと連動させて表示をする仕組み。
ちなみに表示画像と名前は関連づいていないタイプなので、画像は以下のように自ら表示する。

show kagami normal at right

ちなみに、デフォルトだと define e なので、ここ e を k (もしくは自分が定義した変数)に書き換えないとエラーです。

    e "Ren'Py の新しいゲームを作成しました。"
    e "ストーリー、画像、音楽を追加すれば、世界にリリースすることができます!"

Ren'py 使い始めて調べたりなどしたこと

前提

Ren'py の導入が終わり、以下の画像の画面が出来ていることが前提です。

つまづいたところ 初級編

はじめたばかりなので、とても簡単な躓きに関してメモしていきます。

タイトル画面の背景

画像を入れるディレクトリ:gui
ソース内に書くファイル:gui.rpy

普通の背景と違うところにあるんかーい。っていう気持ち。
ただ、チュートリアルがこれなだけであって、画像を入れておくディレクトリはどこでも大丈夫みたい。

define gui.main_menu_background = "*******.jpg"

と指定する。

その他 gui.rpy で設定すること

これは調査の二度手間を防ぐためのメモ

gui というだけあり、もちろん gui に関すること、つまり画面の見た目を操っているのがこのコード。
だから、

  • 文字に関すること
  • 表示位置に関すること

と、ざっくり言えばこんなことができる。
初期に変数が書かれているので、それを調整していけば基本良い

フォントは?

フォントは、game ディレクトリ直下の場所に .ttf や .otf ファイルをつっこむ。

Ren'py やってくぞ(環境構築 Windows)

前説

Ren'py ってなんぞ

ノベルゲームをPythonで作る何か。
公式ウェブこちら
The Ren'Py Visual Novel Engine

なんでRen'pyなの?

Pythonが好きだから。

本文

ではRen'py 書く準備から始めましょう。
昔にもこんな記事かいたような気がしますが、あのころとは環境が違うのと、まったくもって覚えてないので、一から勉強です。
なお、環境構築はWindows編となります事をご了承ください。

前提

Pythonはインストールしたか?

Pythonも触ったことがないなら、多分いきなりRen'pyは無理だ。
それでもやる猛者達は、まずはPython入れる方法を学んできてくれたもう。

Windowsは7+か?

今時そんなこと気にしなくて良いか。

ダウンロード

公式ウェブ(The Ren'Py Visual Novel Engine)のダウンロードボタンを押す。
以下はその画像なのだが、二つボタンがある。
こういう場合、たいていバージョンが低い方が安定していて、高い方が開発中だよ! みたいな感じだと思う。
とりあえず今回は安定板の 7.5.3 を選んだ。

ウェブ画像

上押して出てきたこれを押す。

ダウンロードボタン

そしたらexeファイルをクリック&実行!

こんな感じの中身が出てきました。

ディレクトリの中身

動かしてみる

さっき手に入れたファイルの中にあるrenpy.exeをクリック(32.exeは、おそらく32bit用 とりあえず何も書いてない方クリックしとこう)

実行画面

こんなのが出現。

なんだか制作の入り口が見えてきた!

では、チュートリアルを実行してみましょう。
「プロジェクトの起動」をクリック。

ゲーム画面

おおー!
ちょっと遊んでみます。

ゲーム画面2

なるほどー。
文字送りという概念がなさそうなのが、少し気になるが、、、
まあ、やっていきましょー!

次回につづく!!!