ArchLinux 2015.01.01をVirtualBoxにインストール

January 24, 2015, 3:38 am

≫ Next: FontForge 2.1.20141230 日本語対応版をArch Linuxにインストール

≪ Previous: FontForge 2.0.20140101 日本語対応版をArch Linuxにインストール

Debian6の上で動作するVirtualBox 4.3.20にArchLinux 2015.01.01 をインストールした記録。

Arch Linux 2014.07.03のインストール http://itouhiro.hatenablog.com/entry/20140730/linuxと同じ。細かい点で違うので、違う点のみを記述。

基本的には https://wiki.archlinux.org/index.php/Installation_Guide_%28%E6%97%A5%E6%9C%AC%E8%AA%9E%29の通りに実行した。

OSインストール

% wget http://ftp.jaist.ac.jp/pub/Linux/ArchLinux/iso/2015.01.01/archlinux-2015.01.01-dual.iso

VirtualBoxで仮想ディスクを作成し、isoをセット（[Setting - Storage - Empty - CD/DVD drive - Choose a virtual CD/DVD file..]）して、起動。設定は[メモリ 512MB, HDD 40GB, Audioなし] あとはデフォルト。

パーティション作成。ここがArchLinuxインストールのややこしいところ。今回はfdiskを使用。

パーティションを2つ作成。
1つはswapで1GB。2つめは / (root)で残り全部。

f:id:itouhiro:20150207193019p:plain

f:id:itouhiro:20150207193355p:plain

f:id:itouhiro:20150207193403p:plain

f:id:itouhiro:20150207193410p:plain

swapを有効化。

f:id:itouhiro:20150207193657p:plain

日本のサーバーを指定して、基本システムをインストール。

f:id:itouhiro:20150207194741p:plain

/etc/fstab 作成。

f:id:itouhiro:20150207194748p:plain

lang指定。

% locale-gen
% echo LANG=en_US.UTF-8 > /etc/locale.conf
% export LANG=en_US.UTF-8
% vi /etc/vconsole.conf
% loadkeys jp106
% ln -s /usr/share/zoneinfo/Asia/Tokyo /etc/localtime
% hwclock --systohc --utc

f:id:itouhiro:20150207194811p:plain

grubインストール。

% grub-install --target=i386-pc --recheck /dev/sda
% grub-mkconfig -o /boot/grub/grub.cfg

f:id:itouhiro:20150207194833p:plain

ネットワーク設定。

% vi /etc/ssh/sshd_config
% netctl start en1
% netctl start en2

iso取り外し。

f:id:itouhiro:20150207195000p:plain

GUI環境インストール

X Window Systemを導入。

f:id:itouhiro:20150207195229p:plain

デバイスドライバは VirtualBoxのAddOnを使用する。

f:id:itouhiro:20150207195631p:plain

LXDEを入れてみたが、これはCUIで起動して、startlxde (startx) でGUI開始できないようだった。起動時からGUIになる（lxdmでGUI開始）環境しか想定していないようで、私の好みとは違ったので使用をやめた。

でXfceをまた入れる。これはCUI起動して startx (startxfce) でGUI起動可能なので好みだ。

% pacman -S xorg-server xorg-server-utils xorg-xinit wget
% pacman -S virtualbox-guest-utils
% pacman -S tigervnc
% vi /etc/modules-load.d/vbox.conf
% cat /etc/modules-load.d/vbox.conf
% systemctl enable vboxservice
% pacman -Ss jp
% pacman -S adobe-source-han-sans-jp-fonts
% pacman -S xfce4
% shutdown -h now

xfceインストール前に日本語フォントも入れておくと、見た目がキレイになった。

f:id:itouhiro:20150207200450j:plain

共有フォルダー設定

ArchLinuxはFontForge最新版を使いたいのでインストールしているわけだが、VirtualBoxの共有フォルダー機能を使えば、ホスト環境（ここではDebian）のHDD領域でソース展開・ビルド作業できる。その結果、ゲスト（ArchLinux）の仮想HDDが肥大化するのを防ぐことができるはず。

‥‥と思っていたのだが、VirtualBoxの共有フォルダー機能はsymbolic linkを扱えない。そのためsymlink使うUnix向けソースコードはビルドできない。単にファイルの受け渡しになら使用可能。

マニュアル VirtualBox (日本語) - Arch Linux をゲストにする - ゲスト側の Arch Linux の共有フォルダを読んで以下のように実行した。

VirtualBoxGuestAdditionsのインストール・カーネルモジュールのロード設定は済んでいるので、まずVirtualBoxのGUIで共有フォルダーを設定する。 f:id:itouhiro:20150223223932p:plain

あとは以下のようなコマンド入力。

$ sudo gpasswd -a foo vboxsf
Adding user foo to group vboxsf
$ sudo mkdir -p /media/sf_share
$ sudo systemctl enable vboxservice.service
$ sudo systemctl start vboxservice.service

以下は毎回実行必要。

$ sudo mount -t vboxsf share /media/sf_share -o rw,exec,uid=1000,gid=1000,dev

もしこのコマンドで /sbin/mount.vboxsf: mounting failed with the error: Protocol errorと出る場合は代わりに以下を入力。

$ sudo mount.vboxsf share /media/sf_share -o rw,exec,uid=1000,gid=1000,dev

これで、ゲストのArchLinuxからは/media/sf_share以下を読み書き可能。ホストのDebianからは/home/foo/shareで読み書き可能。

$ ln -s /media/sf_share ~/share

とすることでゲストのArchLinuxの /home/foo/share/でDebianの/home/foo/share/ を読み込むことが可能。

Linuxシステム[実践]入門 (Software Design plus)

作者:沓名亮典
出版社/メーカー:技術評論社
発売日: 2013/07/03
メディア:単行本（ソフトカバー）
この商品を含むブログ (13件) を見る

↧

FontForge 2.1.20141230 日本語対応版をArch Linuxにインストール

February 24, 2015, 2:07 am

≫ Next: Ricty Diminished フォント非公式版 2020-04-15

≪ Previous: ArchLinux 2015.01.01をVirtualBoxにインストール

FontForge 2.1.20141230日本語対応版をLinuxにインストールします。

Arch Linuxなら最新パッケージが使えると思っていましたが2015-02-22現在、ArchLinuxのFontForgeは2014-11-26版を使うようになっています。最新安定版パッケージは2014-12-30なのでそちらを使ってパッケージを作るように修正します。

f:id:itouhiro:20150224190326p:plain

基本は
FontForge 2.0.20140101 日本語対応版をArch Linuxにインストール - itouhiroはてなブログ
と同じです。

https://wiki.archlinux.org/index.php/Arch_Build_System_%28%E6%97%A5%E6%9C%AC%E8%AA%9E%29#.E3.83.84.E3.83.BC.E3.83.AB.E3.81.AE.E3.82.A4.E3.83.B3.E3.82.B9.E3.83.88.E3.83.BC.E3.83.AB
のabsについても参考にします。

# pacman -Q base-devel
# pacman -S base-devel

# pacman -S abs
# abs

このあとはrootではなく、一般ユーザーで実行します。

$ mkdir ~/abs
$ cp -pr /var/abs/extra/fontforge ~/abs/
$ cd ~/abs/fontforge/

日本語パッチの準備
http://www.geocities.jp/meir000/fontforge/の日本語縦書きパッチを取得。

$ wget http://www.geocities.jp/meir000/fontforge/fontforge-20150121-vmetrics.patch.txt
$ sha1sum fontforge-20150121-vmetrics.patch.txt
$ vi PKGBUILD

FontForgeのソースについても https://github.com/fontforge/fontforge/releases/の「Source code (tar.gz)」を取得するように変更します。

$ diff -u PKGBUILD.orig PKGBUILD
--- PKGBUILD.orig       2015-02-22 08:05:28.261224392 +0900+++ PKGBUILD    2015-02-22 21:55:08.402590862 +0900@@ -4,9 +4,10 @@
 # Contributor: William Rea <sillywilly@gmail.com>

 pkgname=fontforge
-_pkgver=2014-11-26+_pkgver=2014-12-30
 pkgver=${_pkgver//-/}
-pkgrel=3+pkgrel=1
 pkgdesc='Outline and bitmap font editor'
 url='http://www.fontforge.org/'
 arch=('i686''x86_64')
@@ -15,10 +16,15 @@
 depends=('libtool''libxkbui''libxi''pango''giflib''libtiff''libspiro''libxml2''libspiro''libunicodenames''zeromq''python2''desktop-file-utils''gtk-update-icon-cache''hicolor-icon-theme')
-source=("http://github.com/fontforge/fontforge/releases/download/${pkgver}/fontforge-${_pkgver}-Unix-Source.tar.gz"-        'http://fontforge.org/cidmaps.tgz')-sha1sums=('ecd776480a47cdcbe1b30ce275172d7d52288e77'-          'efbc7c9d3e95159f5600dc71f9cccb370e46bb94')+source=("https://github.com/fontforge/fontforge/archive/${pkgver}.tar.gz"+        'http://fontforge.org/cidmaps.tgz'+        'fontforge-20150121-vmetrics.patch.txt'+)+sha1sums=('62268018d4b0080f8b976943f36ecbeed5aa6c9a'+          'efbc7c9d3e95159f5600dc71f9cccb370e46bb94'+          'f253791023c32347511e760ebc71f318db879335'+)

 install=install

@@ -30,6 +36,7 @@
                j=$(readlink "$i")
                ln -sf "${j/aclocal\//aclocal\/lt}" "$i"
        done
+        patch -p1 -i ../fontforge-20150121-vmetrics.patch.txt
 }

 build() {

まずは、ソースコードを展開してパッチを適用するまでが正常動作するか、を確認します。

$ man makepkg
-o, --nobuild
           Download and extract files, run the prepare() function, but do not
           build them. Useful with the --noextract option if you wish to tweak
           the files in $srcdir/ before building.


$ makepkg -s -o
==> Making package: fontforge 20141230-1 (Sun Feb 22 22:12:25 JST 2015)
==> Checking runtime dependencies...
==> Installing missing dependencies...
warning: skipping target: libspiro
resolving dependencies...
looking for conflicting packages...

Packages (7) libsodium-1.0.2-1  giflib-5.1.0-1  libspiro-1:0.2-2
             libunicodenames-1.1.0_beta1-1  libxkbui-1.0.2-5  python2-2.7.9-1
             zeromq-4.0.5-1

Total Download Size:   11.57 MiB
Total Installed Size:  75.15 MiB

:: Proceed with installation? [Y/n] Y
:: Retrieving packages ...
error: failed retrieving file 'giflib-5.1.0-1-i686.pkg.tar.xz' from ftp.tsukuba.wide.ad.jp : The requested URL returned error: 404
error: failed retrieving file 'giflib-5.1.0-1-i686.pkg.tar.xz' from mirror.gnomus.de : The requested URL returned error: 404
error: failed retrieving file 'giflib-5.1.0-1-i686.pkg.tar.xz' from archlinux.polymorf.fr : The requested URL returned error: 404
...
error: failed retrieving file 'libspiro-1:0.2-2-i686.pkg.tar.xz' from mirror.archlinux.fi : The requested URL returned error: 404
 libspiro-1:0.2-2-i686     10.4 KiB  3.38M/s 00:00 [######################] 100%
 libunicodenames-1.1...   322.6 KiB  1514K/s 00:00 [######################] 100%
 python2-2.7.9-1-i686      10.5 MiB  2.64M/s 00:04 [######################] 100%
 libsodium-1.0.2-1-i686   142.0 KiB  4.20M/s 00:00 [######################] 100%
 zeromq-4.0.5-1-i686      574.1 KiB  2.24M/s 00:00 [######################] 100%
(7/7) checking keys in keyring                     [######################] 100%
(7/7) checking package integrity                   [######################] 100%
(7/7) loading package files                        [######################] 100%
(7/7) checking for file conflicts                  [######################] 100%
(7/7) checking available disk space                [######################] 100%
(1/7) installing libxkbui                          [######################] 100%
(2/7) installing giflib                            [######################] 100%
(3/7) installing libspiro                          [######################] 100%
(4/7) installing libunicodenames                   [######################] 100%
(5/7) installing libsodium                         [######################] 100%
(6/7) installing zeromq                            [######################] 100%
(7/7) installing python2                           [######################] 100%
Optional dependencies for python2
    tk: for IDLE
    python2-setuptools
    python2-pip
==> Checking buildtime dependencies...
==> Installing missing dependencies...
resolving dependencies...
looking for conflicting packages...

Packages (2) perl-error-0.17022-1  git-2.2.2-1

Total Download Size:    4.14 MiB
Total Installed Size:  26.08 MiB

:: Proceed with installation? [Y/n]
...
error: failed retrieving file 'git-2.2.2-1-i686.pkg.tar.xz' from mirrors.dotsrc.org : The requested URL returned error: 404
error: failed retrieving file 'git-2.2.2-1-i686.pkg.tar.xz' from mirror.archlinux.fi : The requested URL returned error: 404
 git-2.2.2-1-i686           4.1 MiB   483K/s 00:09 [######################] 100%
(2/2) checking keys in keyring                     [######################] 100%
(2/2) checking package integrity                   [######################] 100%
(2/2) loading package files                        [######################] 100%
(2/2) checking for file conflicts                  [######################] 100%
(2/2) checking available disk space                [######################] 100%
(1/2) installing perl-error                        [######################] 100%
(2/2) installing git                               [######################] 100%
Optional dependencies for git
    tk: gitk and git gui
    perl-libwww: git svn
    perl-term-readkey: git svn
    perl-mime-tools: git send-email
    perl-net-smtp-ssl: git send-email TLS support
    perl-authen-sasl: git send-email TLS support
    python2: various helper scripts [installed]
    subversion: git svn
    cvsps2: git cvsimport
    gnome-keyring: GNOME keyring credential helper
==> Retrieving sources...
  -> Downloading 20141230.tar.gz...
  % Total    % Received % Xferd  Average Speed   Time    Time     Time  Current
                                 Dload  Upload   Total   Spent    Left  Speed
100   129    0   129    0     0    103      0 --:--:--  0:00:01 --:--:--   103
100 23.1M    0 23.1M    0     0  1171k      0 --:--:--  0:00:20 --:--:-- 2013k
  -> Downloading cidmaps.tgz...
  % Total    % Received % Xferd  Average Speed   Time    Time     Time  Current
                                 Dload  Upload   Total   Spent    Left  Speed
100   325  100   325    0     0    177      0  0:00:01  0:00:01 --:--:--   178
100  306k  100  306k    0     0  83759      0  0:00:03  0:00:03 --:--:--  225k
  -> Found fontforge-20150121-vmetrics.patch.txt
==> Validating source files with sha1sums...
    20141230.tar.gz ... Passed
    cidmaps.tgz ... Passed
    fontforge-20150121-vmetrics.patch.txt ... Passed
==> Extracting sources...
  -> Extracting 20141230.tar.gz with bsdtar
  -> Extracting cidmaps.tgz with bsdtar
==> Starting prepare()...
patching file fontforge/splinechar.c
patching file fontforge/splinefont.c
patching file fontforge/tottfgpos.c
patching file fontforgeexe/charview.c
patching file fontforgeexe/cvpointer.c
==> Sources are ready.

縦書きパッチは2015-01-21のソース向けなので、この2014-12-30ソースにそのまま当たるか疑問でしたが、問題なく適用できました。

$ makepkg -s
...
make[1]: Leaving directory '/home/foo/abs/fontforge/src/fontforge-20141230'
==> Tidying install...
  -> Purging unwanted files...
  -> Removing libtool files...
  -> Removing static library files...
  -> Compressing man and info pages...
  -> Stripping unneeded symbols from binaries and libraries...
==> Creating package "fontforge"...
  -> Generating .PKGINFO file...
  -> Adding install file...
  -> Generating .MTREE file...
  -> Compressing package...
==> Leaving fakeroot environment.
==> Finished making: fontforge 20141230-1 (Mon Feb 23 00:26:07 JST 2015)
[foo@localhost fontforge]$

ビルドに2時間くらいかかりました。
インストール。

$ sudo pacman -U fontforge-20140101-3-i686.pkg.tar.xz

f:id:itouhiro:20150224190309p:plain

うーん、UserInterfaceのフォントにSource Han Sansを使うとなんだかずれて見えます。

実際には

GUIで使用→Windowsの非公式FontForge
コマンドラインで使用→LinuxのFontForge

と使い分けているので私としては問題ないです。
　

Fontforge

メディア:ペーパーバック
この商品を含むブログを見る

↧

Ricty Diminished フォント非公式版 2020-04-15

May 17, 2020, 1:00 am

≫ Next: M+とIPAの合成フォント Webサイト移転

≪ Previous: FontForge 2.1.20141230 日本語対応版をArch Linuxにインストール

Circle M⁺フォントを2020-03-07にバージョンアップしたので、それに合わせてRicty Diminishedフォントの非公式 2020-04-15 版を生成しました。

ダウンロード

https://ja.osdn.net/downloads/users/26/26394/ricty_diminished-4.1.1.20200415.zip (8.5MB)

公式版 2017-12-03版との違い

Circle M⁺ 1m のバージョンを 1.060 -> 1.063a に更新。
TrueTypeのヒンティング（ヒント情報）を除去。

説明

TrueTypeのヒント情報を外したのは、それがあるとWindows環境のGoogle ChromeやVisualStudio Codeで文字がギザギザするためです。除去すると文字がなめらかになるようです。

私もノートPCでディスプレイが「14インチ、1366×768ピクセル」（画素密度 112 ppi）のWindows10を2019年に使っていて、Ricty Diminishedのフォントのガタガタ感を感じました。以下でもその状況が報告されています。

https://qiita.com/tawara_/items/374f3ca0a386fab8b305

Windowsで文字をきれいにレンダリングするならMacTypeというツールもありますが、最近のGoogle ChromeやVisualStudio Codeには効かないんですよね‥‥。

同じWindows10でも画素密度 250 ppiくらいの環境だと文字のギザギザも気にならないんですが、いろんな解像度のディスプレイを考慮してヒント情報は外しています。

Ricty Diminishedフォント生成スクリプトに加えた修正は、スクリプトをzipに含めていますのでそちらをご覧ください。

↧

M+とIPAの合成フォント Webサイト移転

November 25, 2023, 5:00 am

≫ Next: PICO-8でゲーム制作を学ぶ(1)

≪ Previous: Ricty Diminished フォント非公式版 2020-04-15

「M+とIPAの合成フォント」のWebサイトを移転しました。
移転先： https://itouhiro.github.io/mixfont-mplus-ipa/

ついでにフォント修正やWebサイトのダークモード対応などもやりました。

[合いの手]なぜ移転したの？

[話者]移転前のWebサイトは OSDN という企業が提供するオープンソフトウェアのウェブサイトを無料公開できる場所で公開していたのだが、2023年8月頃から、ファイルのダウンロードができない、と報告を受けていた。

スレッド公開討議:osdnが不安定というか繋がらない - mixfont-mplus-ipa - OSDN

「OSDN」が中国企業に買収～日本のオープンソースプロジェクトホスティングサービス - 窓の杜

そのうち直るかも、と様子見してたが、11月になって、OSDNからファイルのダウンロードができないだけでなく、Webサイトも見られなくなった、と話題になった。

「Tera Term」の公式サイトが「GitHub」へ移転、中国に買収された「OSDN」の不調で - 窓の杜

自分のWebサイトも見られなくなっていたから、移転したんだよ。

[合いの手]これが初めてのWebサイト移転だっけ？

[話者]いや違うよ。最初に公開したのは個人ブログだった。はてなブックマークで少し話題になったり。

そのときのページも残っていて、このページだよ。
M+ と IPAフォントの合成フォント配布 - きりんシステムダイアリー(2006-03-15)

そのときのはてなブックマーク
 https://b.hatena.ne.jp/entry/kirinsystem.net/diary/?date=20060315

[合いの手]話題になったんだ。

[話者]その当時は、まだフリーフォントの品質が高くなかったこともある。

このフォントはフリーであるが、このように高品質だったからな。

そのあと、その個人運営のブログを操作ミスで消してしまい、Webサイトを移転したんだ。そのときは SourceForge.JPという運営だった。
移転した最初の頃のページはこちら。
M+ と IPAフォントの合成フォント

そのページへのはてなブックマーク
 https://b.hatena.ne.jp/entry/mix-mplus-ipa.sourceforge.jp/

そのあと、2010年にMigMix公開したときと 2011年に、デザインを変えたのが今のサイトだね。

その後、2015年にSourceForge.JP からOSDN に名義が変わったが、そのときは、公開していたWebサイトは何も変えていない。

そして今回の GitHubへの移転になったわけだ。

↧

PICO-8でゲーム制作を学ぶ(1)

March 24, 2024, 9:00 am

≫ Next: PICO-8でゲーム制作を学ぶ(2)

≪ Previous: M+とIPAの合成フォント Webサイト移転

[話者]ゲーム制作を学びたいんだって？

[合いの手]ゲームを作りたいんだよね。プログラミングもしたいし、絵も音も自分で作りたい。

でも入門者だから、手軽に取り組みたいんだ。

[話者]有名なのはUnityとかUnreal Engineだけど‥‥。

[合いの手]企業が使う大作ならともかく、個人で短時間で気軽に作るには、それらは大げさな感じがあるんだよね。開発環境インストールだけでも容量使うし。

個人向けのラクラク環境はないかなぁ。

[話者]PICO-8ピコ・エイトはどうだい？ PICO-8 ゲーム開発のススメを読んでみると、これは学ぶのに最適だぞ。

[合いの手]レトロなドット絵ゲームを作る環境なんだね。どこらへんが学ぶのに最適なの？

[話者]他人の作ったゲームを中身をまるごと、たくさん見れるんだ。公式掲示板にたくさんゲームが投稿されていて、その中身を全部見れるから、参考になるぞ。

[合いの手]へぇ。でも有料じゃないか。

[話者] 2000円くらいだから、そう高くはないけどね。
でも、購入しなくても、

PICO-8 Education Edition for Web

で無料で使える。

[合いの手]無料で使えるのか。どう使うの？

[話者]まずは、この入門記事を読み進めてみよう。

PICO–8って何？ - PICO–8ゲーム開発入門(1) - AUTOMATON

ブックマークレット

[合いの手]開発入門(1)は単なる紹介だね。開発入門(2)は‥‥あれ、リンクを押しても飛ばない。

[話者]このページ、リンクや画像先のURLがまちがってて、うまく動作しないことがあるんだよね。

開発入門(2)へのリンク先URLは http://jp.automaton.am/devlog/technical/pico-8-for-beginners-vol2/だけど、この
http://jp.automaton.am/を
https://automaton-media.comに
書き換えすると、正しく動作するようになる。

[合いの手]え゛っ？　どうやって書き換えるの？

[話者]ブックマークレットというのを使えばラクだよ。といっても準備は面倒だが、

「︙＞ブックマークとリスト＞ブックマークバーを表示」する
ブックマークバーで右クリックして、「ページを追加」する

「そのブックマークで右クリック＞編集＞URL」に以下の1行をコピペする

javascript:(()=>{f=(s)=>s.split('http://jp.automaton.am/').join('https://automaton-media.com/');c=document.evaluate('.//img[@src]',document,null,6,null);for(i=0;i<c.snapshotLength;i++){c.snapshotItem(i).src=f(c.snapshotItem(i).src)}c=document.evaluate('.//a[@href]',document,null,6,null);for(i=0;i<c.snapshotLength;i++){c.snapshotItem(i).href=f(c.snapshotItem(i).href)}})();

開発入門(1)、開発入門(2)、... とページを開くたびに、そのブックマークをクリックする

これで書き換えることができるぞ。

[合いの手]ほんとだ。リンク先に行けた。

開発入門(2)

プログラムで絵を描こう - PICO–8ゲーム開発入門(2) - AUTOMATON

[話者]このページでも、さっきのブックマークレットを1度クリックしよう。そうしないと表示されない画像があるから。

[合いの手]まちがえて2回押したら、何か問題ある？

[話者]問題なし。何回押してもいいよ。

[合いの手]ふ～ん。

さて、PICO-8の無料版を使うぞ。

PICO-8 Education Edition

を開くと、PICO-8 の起動画面になってるね。

‥‥なるほど、
HELP
を表示して、
INSTALL_DEMOS
を実行して、
CD DEMOS
で場所を移動して、
LOAD JELPI
でゲームを読み込んで、
RUN
でゲームを開始。
カーソルキーと[z][x]で操作する。
[ESC]キーでゲーム中止、
さらに[ESC]キーでEditorModeになる。

[合いの手]SPLOREはスプローアという読み方でいいのかな？　そういう英単語があって、意味は「浮かれ騒ぎ」らしい。

[話者]この SPLORE という機能は、無料版では使えないから注意な。
SPLOREの読み方は‥‥PICO-8公式ページに

Explore the Cartverse （カートリッジ宇宙を探検エクスプローアしよう）
PICO-8 comes with a built-in cartridge browser called SPLORE,　（PICO-8は内蔵のSPLOREと呼ばれるカートリッジブラウザがあり、）

と書いてあるから、もしかしてエスプローアと読むのかも。

[合いの手]あとはLuaルア言語の説明か。

PSET()で点を打ち、
LINE()で線を引き、
CIRCFILL()で円を、
RECTFILL()で四角を描く。
CLS()で全部消す。

なるほどね。

[合いの手]この入力したソースコードを保存するには、どうやるの？

[話者]https://www.lexaloffle.com/bbs/?tid=47278に説明があるが、

SAVE 20240325-1.P8.PNG
のように入力すれば、PNG画像ファイルがダウンロードされるぞ。

この PNG画像ファイルは、ソースコードも含まれている。PICO-8で読み込めばソースコードも復活する。

PICO-8で読み込むには
LOAD
と入力すれば、読み込むファイル選択ダイアログが出てくる。

↧

PICO-8でゲーム制作を学ぶ(2)

March 25, 2024, 9:00 am

≫ Next: PICO-8でゲーム制作を学ぶ(3)

≪ Previous: PICO-8でゲーム制作を学ぶ(1)

[話者]今回は

を学ぼう。

[合いの手]ふむふむ、

_INIT()関数で初期化。
_UPDATE()関数は1/30秒おきに呼ばれる。
_DRAW()関数は、_UPDATE()が1/30秒以内に完了した場合、その後に呼ばれる。1/30秒以内に完了しなかった場合、呼ばれない。

Sprite Editorでキャラクターも描いたぞ。

ソースコードも入力した。

カーソルキーでキャラを動かせる。

このソースコード、入力したけど、意味がいまいち分かってない。

x=64
y=64
sprite=1
dir=1
itvl_frame=8-- interval =1/30sec
anim_frame=2
t=0function input()
 local pressed=falseif btn(0) then x-=1 dir=4 pressed=trueendif btn(1) then x+=1 dir=3 pressed=trueendif btn(2) then y-=1 dir=2 pressed=trueendif btn(3) then y+=1 dir=1 pressed=trueendif pressed then 
  sprite=dir+flr((t%(anim_frame*itvl_frame))/itvl_frame+1)*16else
  sprite=dir
 endendfunction _update()
 t+=1
 input()
endfunction _draw()
 rectfill(0,0,127,127,13)
 spr(sprite,x-4,y-4)
end

[話者]このソースコードで大事なのはスプライト番号だね。

スプライト(sprite)とは、小さな絵の部品です。
PICO-8では、8×8ピクセルの正方形がスプライトの最小単位です。

スプライト番号は以下のようになっている。

画像一枚にすれば、こうなる。

[合いの手]ふんふん。

[話者]ソースコードの変数の
spriteこれが「スプライト番号」。
dirというのはdirection、つまり「体がどちらを向いているか」のこと。

dir	体の向き
1	↓
2	↑
3	→
4	←

という対応になっているのが画像と見比べると分かる。

if btn(0) then x-=1 dir=4 pressed=trueendif btn(1) then x+=1 dir=3 pressed=trueendif btn(2) then y-=1 dir=2 pressed=trueendif btn(3) then y+=1 dir=1 pressed=trueend

というソースコードで、btn(0)から btn(3)までは、カーソルキー ←, →, ↑, ↓ に対応する

btn（キー）	dir（体の向き）
0（←）	4（←）
1（→）	3（→）
2（↑）	2（↑）
3（↓）	1（↓）

というように、体の向きとカーソルキーを一致させるソースコードになっている。

このinput関数、1/30秒ごとに呼ばれて実行されるんだけど、

function input()
 local pressed=false

毎回 pressed変数が false になる。
その後、キー入力を確認して、カーソルキーがどれか押されてれば pressed変数は true になる。 localと付与すると、ブロック（endやelseで閉じられる領域）内だけで有効なローカル変数になる。localがないとグローバル変数になる。

  sprite=dir+flr((t%(anim_frame*itvl_frame))/itvl_frame+1)*16

この行はややこしい。カッコの奥のほうから先に解釈されるから、奥のほうから見ていこう。

anim_frame*itvl_frameこの変数はソースコードの上のほうで、こう定義されている。

itvl_frame=8-- interval =1/30sec
anim_frame=2

--の後は、人に読ませるためのコメントで、機械は読まない部分。フレームというのは、4コマ漫画でいうコマのこと。 PICO-8は1秒に30フレーム（30コマ）表示する。

anim_frame*itvl_frameの変数はソースコード中で変化しないので、要するに 16と書いてあるのと同じ。

t%(anim_frame*itvl_frame)の
tはtimer変数で、1/30秒ごとに1ずつ増加する。
t%16は、tを16で割った余り（剰余）を計算する。要するに1/30秒ごとに 0, 1, 2,.., 14, 15, 0, 1, 2,..という数字のどれかになる。

(t%(anim_frame*itvl_frame))/itvl_frameは、0/8, 1/8, 2/8,.., 14/8, 15/8, 0/8, 1/8,..という数字のどれかになる。小数で表すと、0, 0.125, 0.25, 0.375, 0.5,.., 1.75, 1.875, 0, 0.125,..になる。

(t%(anim_frame*itvl_frame))/itvl_frame+1は、上記の数字に +1、つまり小数だと 1, 1.125, 1.25,.., 2.75, 2.875, 1, 1.125,..になる。

flr((t%(anim_frame*itvl_frame))/itvl_frame+1)のflrは floor つまり小数点以下を削除するので、つまり 1, 1, 1, 1, 1, 1, 1, 1, 2, 2, 2, 2, 2, 2, 2, 2, 1, 1, ..というふうに 8回ごとに 1 か 2 が出てくる。

flr((t%(anim_frame*itvl_frame))/itvl_frame+1)*16は上記の16倍、つまり 16, 16, 16, 16, 16, 16, 16, 16, 32, 32, 32, 32, 32, 32, 32, 32, 16, 16, ..というふうに8回ごとに 16 か 32 が出てくる。

dir+flr((t%(anim_frame*itvl_frame))/itvl_frame+1)*16は、上記の数字に、体の向きが ↓だったときは +1、↑だったときは +2、→のときは +3、←のときは +4。

これで、分かったかな？

[合いの手]よく分からないぞ。

[話者]つまりだな、

if pressed then 
  sprite=dir+flr((t%(anim_frame*itvl_frame))/itvl_frame+1)*16else
  sprite=dir
 end

のソースコードは、
カーソルキー押してるときは、
8/30秒ごとに、

か

を交互に表示する。体の向きにしたがって、横4つ並びのどれか1つのスプライトを表示するんだ。

カーソルキー押してないときは

のうち、体の向きにしたがって、横4つ並びのどれか1つを表示する。

ということだ。

[合いの手]はー。そういうことか。

でも、それって歩くとき2パターンしか使ってないってことだよね。
普通は 3パターンあるなら、3パターンを順繰りに表示しない？

[話者]それ、してみると、なんか歩いてる感じにならないんだよなぁ。

anim_frame=3if pressed then--sprite=dir+flr((t%(anim_frame*itvl_frame))/itvl_frame+1)*16
  sprite=dir+flr((t%(anim_frame*itvl_frame))/itvl_frame)*16else
  sprite=dir
 end

[合いの手]うーん、確かにそんな感じも。キャラデザインがあまり良くないのかもなー。

[話者]

ソースコードの残りは簡単だな。

function _update()
 t+=1
 input()
end

このコードは、
1/30秒ごとに、
tを1増加させて、
input関数を呼び出している。

function _draw()
 rectfill(0,0,127,127,13)
 spr(sprite,x-4,y-4)
end

このコードは、
rectfillで画面を全部塗りつぶして、前回描いたものを消している。
sprでスプライトを表示する。そのとき、スプライト番号と位置を指定してる。

[合いの手]うん、分かった。

[話者]今回のソースコードはこちら。

↧

PICO-8でゲーム制作を学ぶ(3)

March 26, 2024, 9:00 am

≪ Previous: PICO-8でゲーム制作を学ぶ(2)

[合いの手] PICO-8を学び中。

を学んで、

効果音も作ってみた。

ソースコードも入力。

[合いの手]ところでプレイ動画はどうやって撮影するんだっけ？

[話者]無料版については、 https://www.lexaloffle.com/bbs/?tid=47278に書いてある。

[Ctrl]＋[8] で撮影開始。
[Ctrl]＋[9] で撮影完了して、
画面右上にアニメGIFが表示されるので、右クリック＞保存。

[合いの手]撮影できた。これがプレイ動画。mp4じゃなくて、gifだから、音は出ないんだね。

ソースコード、前回との違いは少ない。

x=64
y=64
sprite=1
dir=1
itvl_frame=8-- interval =1/30sec
anim_frame=2
t=0
item_x=32
item_y=32
item_sprite=5function input()
 local pressed=falseif btn(0) then x-=1 dir=4 pressed=trueendif btn(1) then x+=1 dir=3 pressed=trueendif btn(2) then y-=1 dir=2 pressed=trueendif btn(3) then y+=1 dir=1 pressed=trueendif pressed then 
  sprite=dir+flr((t%(anim_frame*itvl_frame))/itvl_frame+1)*16else
  sprite=dir
 endendfunction distance(x1,y1,x2,y2) return sqrt((x1-x2)^2+(y1-y2)^2) endfunction collide(x1,y1,x2,y2)
 if distance(x1,y1,x2,y2) < 4thenreturntrueendreturnfalseendfunction warp_item() item_x=rnd(128) item_y=rnd(128) endfunction _update()
 t+=1
 input()
 if collide(x,y,item_x,item_y) then warp_item() sfx(0) endendfunction _draw()
 rectfill(0,0,127,127,13)
 spr(item_sprite,item_x-4,item_y-4)
 spr(sprite,x-4,y-4)
end

[話者] distance関数（距離を計算する）と、collide関数（衝突しているか判定する）を使っているくらいだな。

[合いの手]ソースコード入りPNG画像ファイルに、スクショを埋め込むにはどうするの？

[話者]ゲームをプレイ中に Ctrl+7 を押してから、
SAVE 20240327-1.p8.png
みたいにPNG画像を保存すればいい。

[合いの手]こうか。
ソースコード入りPNGは以下だよ。

次は

1、2、3...無限大......繰り返しとテーブル - PICO-8ゲーム開発入門(8) - AUTOMATON

プレイ内容

ソースコード

x=64 y=64
sprite=1
dir=1
itvl_frame=8-- interval per frame 1/30sec
anim_frame=2
speed=2
items={}
time=0
t=0
item_sprite=5function update_timer()
 if #items>0then time+=1endendfunction draw_timer()
 local centi=flr(time*10/3)%100;
 if centi<10then centi="0"..centi endlocal sec=flr(time/30)
 local min=flr(sec/60)
 sec=sec%60if sec<10then sec="0"..sec endlocal col=7if #items==0then col=rnd(16) endprint(min..":"..sec.."."..centi, 2, 120, col)
endfunction input()
 local pressed=falseif btn(0) then x-=speed dir=4 pressed=trueendif btn(1) then x+=speed dir=3 pressed=trueendif btn(2) then y-=speed dir=2 pressed=trueendif btn(3) then y+=speed dir=1 pressed=trueendif pressed then
  sprite=dir+flr((t%(anim_frame*itvl_frame))/itvl_frame+1)*16else
  sprite=dir
 endendfunction distance(x1,y1,x2,y2) return sqrt((x1-x2)^2+(y1-y2)^2) endfunction collide(x1,y1,x2,y2)
 if distance(x1,y1,x2,y2) < 6thenreturntrueendreturnfalseendfunction place_items()
 local i=1for y=0,120,8dofor x=0,120,8do
   items[i]={x=x+4,y=y+4}
   i+=1endendendfunction draw_items()
 for item in all(items) do
  spr(item_sprite, item.x-4, item.y-4)
 endend--function _init()
 place_items()
endfunction _update()
 t+=1
 input()
 for item in all(items) doif collide(x,y,item.x,item.y) then del(items, item) sfx(0) endend
 update_timer()
endfunction _draw()
 rectfill(0,0,127,127,13)
 draw_items()
 spr(sprite,x-4,y-4)
 draw_timer()
end

[話者]タイマー処理の部分は

タイマーの表示も組み込まれています。
1/30秒おきに1ずつ増えるカウンターを「分：秒.1/100秒」に分解する処理が行われています。

具体的には

flr()はJavaScriptでいう Math.floor()で、小数点以下を削除する。
sec="0"..secというのは 1ではなく 01にする処理だな。

配列変数は、Lua言語ではtableと呼ぶ。JavaScriptのObjectと同じ感じだね。配列の添え数は、JavaScriptなら 0 から始まるけど、 Luaは1 から始まるのが特徴的。

[合いの手]time変数と t変数の違いはなんだろ？

[話者]どちらも1/30秒ごとに +1 されるけど、
time変数は、青リンゴをすべて取得してしまうと、+1 されなくなるんだ。
t変数は青リンゴと関係なく +1 される。

この t変数、本当はもっとケアすべきなんだよね。

PICO-8説明書

PICO-8の数値は32767.99までしか扱えません。
毎フレームカウンターに1を足すと、18分後にはオーバーフローを起こします!

と書いてあるように、32700 くらいを超えて、+1 すると、マイナス値の -32700 くらいになるので、
長時間プレイするゲームなら、
t = (t + 1) % 32700
とかの処理を入れて、適度に 0 に戻すほうがいいんだけどね。このソースコードでは、やってない。

[合いの手]これは短時間しかプレイしないゲームなので、そこまでケアしてないってことか。

ゲームの画面をどう作って更新するのか、気になってたけど、PICO-8は、
1/30秒ごとに全部消して、
毎回1から描き直す、
重ね順で下のほうを先に描いて、後から描いたのは重ね順の上になる
という更新方法なんだね。

なんか毎回書き直すのは無駄な気もするけど、単純だし、これでもいいな。

ソースコードは以下。

↧