ティラノスクリプトで作ったノベルゲームをAndroidアプリ化してAdMobを貼る手順

ティラノスクリプトで作ったノベルゲームをスマホアプリ化(Androidアプリ)して広告(AdMob)を貼る手順の備忘録。(2019年4月)


(自戒)
古い情報を鵜呑みにしない。




こちらのサイトを参考に、AndroidStudioをPCにインストールする。
2019年8月から、アプリリリースにはAndroid 9.0(API レベル 28)以上が必須。公式サイトより
API28をターゲットにするにはAndroidStudio 3.xを使うこと。古いバージョンでは色々不具合が出る…


②エミュレーターで「HelloWorld!」を表示させて、環境構築がきちんと出来ているか確認する。
エミュレーターは起動に時間がかかるので気長に待つこと。自動でゲームが起動される。


ティラノプレイヤー スタンドアロン版 for Androidをダウンロードする。
(2019年5月現在、v112)

④ダウンロードしたファイルを展開し「TyranoPlayerFramework_android_v112」→「main」→「assets」の中に、制作したティラノスクリプトのゲームプロジェクト「data」「index.html」「tyrano」の3つを入れる
tyrano.png

(この3つをコピーして「assets」の中に貼り付ける)


⑤AnrdoidStudioを起動し、上部のメニューから「File」→「New」→「New Project」で新規プロジェクトを作成する。

⑥「Empty Activity」を選択
empty

⑦プロジェクト名を設定する
project.png

Name…作りたいアプリの名前を入力する。日本語不可。1文字目は英大文字が推奨されているらしい。
Package name…パッケージ名は、「所有しているドメイン名の逆順 + アプリ名(小文字始まり)」とするのが通例となっている。例えば「abcd.co.jp」というドメインを所持している場合、「jp.co.abcd.アプリ名(さっき入力したName)」がパッケージ名となる。パッケージ名は、重複がなく永続的に使用できるものが良い、とのこと。アプリ公開後は変更不可。パッケージ名は基本的に一般ユーザが見ることはない。
Save location…データの保存先。ここに自動保存される。覚えておくと便利。(削除したり複製したり)
Language…「Java」を選択する。
Minimum API level…アプリを実行するのに必要な最低APIレベル。この値以下の端末ではインストールできない。2018年10月時点のシェアを見ると、API18以下はほぼ使ってる人がいないので、19か21ぐらいに設定するのが良いと思われる。


⑧「Finish」を押すと新規プロジェクトが作られる。結構時間がかかるのでしばらく待つ。

⑨左側の「app」のところで右クリックして、「Show in Explorer」を選択する。
app.png

⑩「app」→「src」の中に「main」があるので削除して、先程用意しておいたmainフォルダに置き換える。

⑪エミュレーターで動作確認!

★メモ
・Live2Dを使用したゲームは、エミュレーターではLive2Dが表示されなかったのですが、実機では表示されました。
・一定時間操作しないと自動で左上にメニューが表示されます。メニューを消すには、main/assets/tyrano_player.jsのsetTimeout以下を全部削除します。こちらの記事の一番下に消し方が載っています。






Android StudioでのAdMob広告の実装手順




①AdMobに登録する。
登録の際に電話番号の最初に「+81」をつけないと「電話番号が正しくありません」と弾かれます。


②AdMobアカウントにログインし、サイドバーで 「アプリ」 をクリックし、「アプリを追加」をクリックしてアプリの登録を行う。

③「広告ユニットを追加」をクリックしてこのアプリの広告ユニットを作成する。「バナー広告」を選択する。

④上がアプリID、下が広告IDになります。
admob.png

Google Mobile Ads SDK ガイドバナー導入ガイドの手順に従って、広告を実装します。
以降はAndroidStudioでの操作になります。
(Google Mobile Ads SDKを使う方法以外にFirebaseを使って実装する方法もありますが、この記事ではSDKを使う方法でいきます)

動作確認をする際、AdMob App IDはテスト用IDを使用しないとBANされることがあるので注意



~実装手順その1 Google Mobile Ads SDKの導入~

まず、Google Mobile Ads SDK ガイドから。ややこしそうだけど工程は4つ。
(結構頻繁に更新されるっぽいので、公式ガイドの手順を優先すること)

①プロジェクトレベルのbuild.gradleにgoogle()の記述があるかを確認します。

プロジェクトレベルのbuild.gradleとは、「Gradle Scripts」にある「build.gradle(Project:アプリ名)」のことです。
ダブルクリックして開いて、右にコードが出てくるので、allprojectsの中にgoogle()があることを確認します。

code.png



②アプリレベルのbuild.gradleに以下を追加。
implementation 'com.google.android.gms:play-services-ads:17.2.0'

アプリレベルのbuild.gradleとは、先程の「build.gradle(Project:アプリ名)」の下にある「build.gradle(Module:app)」の事です。
ダブルクリックして開いて、「dependencies」の中に「implementation 'com.google.android.gms:play-services-ads:17.2.0'」を記述します。17.2.0の数値はどんどん新しくなるので公式サイトにある最新のものを利用すること。
build.gradleファイルに変更を加えると同期させることが求められるので、同期する。

code2.png


③AndroidManifest.xml に以下のタグを追加。

  <meta-data
android:name="com.google.android.gms.ads.APPLICATION_ID"
android:value="[ADMOB_APP_ID]"/>


AndroidManifest.xmlは、「app」→「mainifests」の中にあります。
ダブルクリックして開いて、「application」のところに上記のタグを追加する。
[ADMOB_APP_ID]にはサンプルIDの「ca-app-pub-3940256099942544~3347511713」を記述しておく。[ ]は不要。
リリースする際に、自分のアプリIDに変更する。

code3.png



④MainActivityに以下2つを追加。
import com.google.android.gms.ads.MobileAds;

MobileAds.initialize(this, "YOUR_ADMOB_APP_ID");

「MainActivity」は「app」→「java」→「jp.tyranoplayerframework」の中にある。
ダブルクリックして開いて、「import…」のところに「import com.google.android.gms.ads.MobileAds;」を、「protected void onCreate(Bundle savedInstanceState) 」の中に「MobileAds.initialize(this, "YOUR_ADMOB_APP_ID");」を追加する。
「YOUR_ADMOB_APP_ID」は、サンプルIDの「ca-app-pub-3940256099942544~3347511713」を記述しておく。
リリースする際に、自分のアプリIDに変更する。「" "」は残しておく。

code4.png



⑤一旦エミュレーターを起動して、エラーなくゲームが起動できることを確認。
エラーが出たらどこか間違えてるはず。
現時点ではまだ広告は表示されない。



~実装手順その2 バナー広告の貼り付け~

バナー導入ガイドの手順通りに進めていきます。工程は2つ。


①「activity_main.xml」に以下のタグを追加します。

  <com.google.android.gms.ads.AdView
xmlns:ads="http://schemas.android.com/apk/res-auto"
android:id="@+id/adView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_alignParentBottom="true"
ads:adSize="BANNER"
ads:adUnitId="ca-app-pub-3940256099942544/6300978111">
</com.google.android.gms.ads.AdView>


「activity_main.xml」は、「app」→「res」→「layout」の中にある。
ダブルクリックして開き、「Text」タブに切り替えるとコードが出くるので、ここに上記のコードを記述する。
IDはテスト用の広告IDになっているので、リリースする前に自分の広告ユニットIDに変更する

code5.png

★注意★
ティラノでは「LinearLayout」というレイアウトの設定になっていて、広告が見えない状態になっている(恐らく画面外に押し出されている)ので、「LinearLayout」を「RelativeLayout」に書き換えると良い。




②「MainActivity」に以下のタグの色付き部分を追加します。
(「MainActivity」は「app」→「java」→「jp.tyranoplayerframework」の中にあります)

package ...

import ...
import com.google.android.gms.ads.AdRequest;
import com.google.android.gms.ads.AdView;


public class MainActivity extends AppCompatActivity {
private AdView mAdView;

protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);

MobileAds.initialize(this,
"ca-app-pub-3940256099942544~3347511713");

mAdView = findViewById(R.id.adView);
AdRequest adRequest = new AdRequest.Builder().build();
mAdView.loadAd(adRequest);
}
}



⑤エミュレーターでエラー無く起動出来ることを確認。テスト広告が表示されてたら成功です!








★画面を横向きに固定する方法
AndroidManifest.xml を開きactivityタグのところに「android:screenOrientation="landscape"」という一文を追加する。
(「AndroidManifest.xml」は「app」→「manifests」の中にあります)
http://msty.hatenablog.jp/entry/android-fixed-screen

ちなみに、「sensorLandscape」と入力すると上下方向可変にすることも出来る。
https://teratail.com/questions/94426




★広告位置の調整方法
「activity_main.xml」のプレビュー画面で配置を確認しながらレイアウトの変更ができます。
広告を下部に配置したい場合、「WebView」に「android:layout_marginBottom="50dp"」を追加する。
(標準のバナーサイズは320×50dpなので下部に50dp余白をつくる)
(エミュレーターと実機と両方でちゃんと表示されるか確認する。プレビューのレイアウトが実機では反映されないことがあったので)

code6.png

広告を上部に配置したい場合は「AdView」の「alignParentBottom」を「alignParentTop」に変える。
誤タップを誘うような広告配置は禁止されていて、広告配信停止等になることがあるので注意。


★アイコンの変更方法
https://noknow.info/it/ja/java/android/tips/2018/set_the_original_icon

★アプリ名の変更方法
「app」→「res」→「values」→「strings.xml」を変更
ここで設定した名前が実際にアプリのアイコンの下に表示された名前になる?
http://書物の回想.コム/archives/3659

★バージョンアップを行う時は、バージョニングの設定を行うこと!
アプリのバージョニング | Android Studio
「build.gradle(Module:app)」の「versionCode」の数値を増やしていく。(1→2→3)
その下の「versionName」はユーザーに公開するアプリのバージョン。
「versionCode」の値と「versionName」の値は違っててOK。




APKファイルの作成手順



アプリを公開する為に、APKファイルの書き出しを行います。
apkファイルの書き出し方法は以下のサイトを参考にしました。
https://akira-watson.com/android/apk.html


はじめての場合、「Create new…」をクリックして「New Key Store」の作成を行う。

・Key store path(key storeの保存場所)
 空欄の右のファイルアイコンをクリックしてキーストアの保存場所を選択する。アプリアプデの際必要なので覚えておくこと。
・Password
 Key storeのパスワード。自由に設定してOK。
・Confirm
 「確認」という意味。先程入力したパスワードを再度入力する。
・Alias
 ラベル的なものだと思う。自由に設定してOK。
・Password
 Keyのパスワード。先程入力ししたKey storeのパスワードとは別物。同じにしておいてもOK。
・Validity(years)
 使用期限。25年以上にしておく必要あり。
・Certificate
 何か1つは入力しないとエラーになる。とりあえずCountry CodeにJPと入れる。

キーストアとエイリアスの仕組みについては以下の記事が分かりやすかったです。
https://blog.aroundit.net/android-keystore-alias/
複数のアプリを開発する際、Keystoreとaliasは同じものを利用すれば良いらしいです。

Signature VersionsはV1とV2両方選択しておくのが無難らしいです。V1は必須っぽいです。

「Destination Folder」がapkファイルの出力場所なので覚えておく。
(「release」というフォルダの中に「app-release.apk」が出来ているはず。)





GooglePlayストアへアプリを登録する


以下のサイトの手順で登録しました。
https://qiita.com/kusokamayarou/items/e3a1319e827bbaa78fc2

「アップデートを処理しています」という表示が出ている時はまだ審査中です。

up

アルファ版が公開待ちから公開中になるまで2時間程かかりました。
内部テスト版というのが最近できたみたいなので、そっちを利用したほうが良いかも。



~メモ~
AdMOBのお支払い設定を登録していないと、本番用広告が表示されない。
お支払い設定をしてアカウント承認まで1日以内ぐらい。
AdMOBから最初に送られてきたメールに書いてあった。

ティラノスクリプト 覚え書き①

備忘録としてゲーム製作過程をメモしておきます。
(間違った情報が含まれている可能性があります)


■ティラノスクリプトのダウンロード


https://tyrano.jp/dl/
ここからティラノスクリプトのスタンダードパッケージをダウンロード。



■ゲーム画面サイズの変更


・ティラノスクリプトの標準解像度は960×640。
・最近のスマホは16:9が主流。(2018年4月現在)(http://sounansa.net/archives/2428)
・よって今回は1280×720で制作する。
【追記】2019年の主流は375x667。つまり約16:9。(https://lab.syncer.jp/Statistic/Screen-Size/#Mobile)

「data」→「system」→「Config.tjs」内の「画面サイズ」の数値を変更する。
http://corevale.com/wordpress/visual-novel/5160



■タイトル画面の作成


①タイトルの背景画像、はじめからボタン、つづきからボタンの3つの画像とBGMを用意。

・タイトルの背景画像
 「title.png」という名前で「bgimage」フォルダへ
・はじめからボタン
 「start.png」という名前で「image」フォルダ内の「title」フォルダへ
・つづきからきからボタン
 「load.png」という名前で「image」フォルダ内の「title」フォルダへ
・BGM
「title.ogg」という名前で「bgm」フォルダへ
(※mp3だと再生出来ない場合あり。https://tyrano.jp/usage/tutorial/bgm)


(ついでに、「bgimage」フォルダと「title」フォルダと「bgm」フォルダ内のその他のファイル全部削除)


②「title.ks」に以下を記述。(もともと書いてあるスクリプトは全て削除)
----------------------------------------------

[title name="ゲームタイトル"]

[playbgm storage=title.ogg]

;背景画像を設定
[image layer="base" page="fore" storage=title.png]

;メッセージレイヤを非表示にしておく
@layopt layer=message0 visible=false

;右下のメニューボタンを非表示にする
[hidemenubutton]

;はじめから
[button graphic="title/start.png" target=*gamestart x=510 y=400]

;つづきから
[button name="role_button" role="load" graphic="title/load.png" x=510 y=500]

[s]

*gamestart
;一番最初のシナリオファイルへジャンプする
@jump storage="scene1.ks"

----------------------------------------------



③「first.ks」に以下を記述。(もともと書いてあるスクリプトは全て削除)
----------------------------------------------

;ティラノスクリプトが標準で用意している便利なライブラリ群
;コンフィグ、CG、回想モードを使う場合は必須
@call storage="tyrano.ks"

;「first.ks」が一番最初に呼び出されるファイルなので、タイトル画面にジャンプするように記述
@jump storage="title.ks"

----------------------------------------------
★「first.ks」は、ゲーム起動時に最初に読み込まれるファイル。
メニューからのタイトルに戻るボタンを押した後にも「first.ks」が読み込まれる。



■シナリオの作成


①以下の素材を用意
・背景画像
「haikei1.png」という名前で「bgimage」フォルダへ
・フレーム画像
「frame.png」という名前で「image」フォルダへ


②文字色の変更
「data」→「system」→「Config」の中の「文字の色」を変更
(焦げ茶:0x330000)


③「sscene1.ks」に以下を記述。(もともと書いてあるスクリプトは全て削除)
----------------------------------------------
*start

; 初期化
[cm]
[freeimage layer="base"]
[clearfix name="role_button"]
[showmenubutton]

;背景を表示する
[bg storage=haikei1.png]

;メッセージレイヤを再度表示する
@layopt layer=message0 visible=true

;メッセージウィンドウの設定
[position layer="message0" frame="frame.png" left=0 top=400 width=1280 height=350 page=fore visible=true]
;topはメッセージを表示する高さの位置 leftはメッセージを表示する横位置

;文字が表示される領域を調整
[position layer=message0 page=fore margint="100" marginl="300" marginr="70" marginb="60"]
;margint(上) marginl(左)marginr(右)marginb(下)

;キャラ名の表示位置の設定
[ptext name="chara_name_area" layer=message0 width="100" x=360 y=470 size=23 bold=true]
[chara_config ptext="chara_name_area"]

#キャラ名
あいうえお。[l][cm]
かきくけこ。[l][cm]
さしすせそ。[l][cm]
----------------------------------------------


■Live2Dの導入


https://qiita.com/tempura17654/items/73b292406b6761604301

①Live2Dプラグインをダウンロード
https://tyrano.jp/sample/show/2

Live2Dプラグインの「others」フォルダをティラノスクリプトのスタンダードパッケージの「others」フォルダへ上書き。

Live2Dプラグインの「scenario」フォルダをティラノスクリプトのスタンダードパッケージの「scenario」フォルダへ上書き。

②Live2D SDK WebGLをダウンロード
http://sites.cybernoids.jp/cubism-sdk2/webgl2-1

Live2D_SDK_WebGLの「lib」→「live2d.min.js」をティラノスクリプトの「data」→「others」→「live2d」→「lib」へコピー

「__MACOSX」と「.DS_Store」は必要ないので削除してOK。
(Macで圧縮されたzipファイルをWindowsで解凍した場合に出てくる不要なファイル)


③Live2Dモデルの準備
ティラノスクリプトの「data」→「others」→「live2d」→「assets」の中へ作ったLive2dモデルを入れる。

ティラノスクリプトの「data」→「others」→「live2d」→「Live2dmodel.js」を開き、最後の行に以下を追加する。

----------------------------------------------

// Live2Dモデル(★Live2Dの名前★)
LIVE2D_MODEL['★Live2Dの名前★'] = {
"filepath":"data/others/live2d/assets/★Live2Dの名前★/",
"modeljson":"★Live2Dの名前★.model.json"
};

----------------------------------------------


④「scene1.ks」に以下の内容を追加
----------------------------------------------

;live2dプラグインを読込
@call storage="live2d/live2d.ks"

; Live2Dモデルの定義
[live2d_new name="★Live2Dの名前★" glscale="1.0"]
;glscaleは倍率

; Live2Dモデルの表示
[live2d_show name="★Live2Dの名前★" time="0" left="0" top="-100"]
;leftで横位置、topで縦位置指定

; Live2Dモデルの移動
[live2d_trans name="★Live2Dの名前★" time="10" left="-230" top="-100"]
----------------------------------------------


モーションの表示
----------------------------------------------
[live2d_motion name="★Live2Dの名前★" filenm="モーション名.mtn"]

----------------------------------------------



■クリア後のおまけの作り方



①エンディングの直前に以下を記述
----------------------------------------------
[eval exp="sf.clear=true"]
----------------------------------------------


②「title.ks」の「はじめから」「つづきから」ボタンの下に以下を追加
----------------------------------------------
;おまけ
[if exp="sf.clear==true"]
[button graphic="title/omake.png" storage="omake.ks" x=510 y=600]
[endif]
----------------------------------------------

おまけボタンをクリックすると「omake.ks」にジャンプする。
一度クリアすると、一旦ゲームを終了してもおまけボタンはずっと表示されるっぽい。





Q.キャラ名の中央寄せ(センター表示)をしたい
A.「align=center」で可能

Q.周回プレイするとキャラ名が濃くなっていく
A.キャラ名欄が重複表示になっているのが原因。キャラ名欄を一旦消す必要がある。
「@free layer=message0 time=500 name=chara_name_area wait=true」で削除可能。
これを[ptext name="chara_name_area"…](キャラ名表示スクリプト)の前に書き加えるとよい。
http://turikare.com/blog/?p=991

Q.周回プレイするとロールボタンが重複表示される
A.[clearfix name="★ロールボタンの名前"]でfixレイヤーに表示されているボタンを(name指定で)消去することが可能。
ロールボタン表示スクリプトの前に書き加えるとよい。

Q.ロードするとLive2Dの立ち絵の縦位置がずれる
A.「live2d_new name」でtopの位置を指定していても、ロード時に反映されないらしい。
キャラの位置は「live2d_show」で指定すると良い。

Q.ロード時、Live2Dが表示される前に進めようとするとエラーになる
A.Live2D復元している間、マスクをかけておく。以下のような感じで記述。
    [mask time=10]
    [call storage="live2d/live2d.ks"]
    ;live2d復元
    [live2d_restore]
    [mask_off]

Q.セーブデータを削除したい
A.以下をシナリオファイルに記述してゲームを起動する。
[iscript]
localStorage.clear()
[endscript]
(プロジェクトIDが同一のゲームのセーブデータも全部消えるので注意)

Q.変数を削除したい
A.以下をシナリオファイルに記述してゲームを起動する。
[clearsysvar](システム変数全消去)
または
[clearvar](ゲーム変数全消去)

Q.セーブ・ロード画面のサムネイルサイズの変更方法
A.「tyrano.css」の「セーブデータのサムネイル部分の設定」のwidthとheightの値を変更する?あと、save.htmlのwidthの値を変更する?要確認

アンソロジー「空」

青空日和


昨年11月に発行された、アンソロジー「空」に寄稿させて頂いたイラストです。

公式サイト:http://clew09.web.fc2.com/sora/
通販:https://unclear09.booth.pm

「am」と「pm」の2冊に分かれていて、イラストと小説が計72作品掲載されています。
私のイラストは、「am」の一番最初に載せて頂いています。

まさか自分の作品を一番目にしてもらえるとは思っていなかったのでびっくりしましたが、本を手に取った方に最初に自分の作品を見てもらえる事がすごく嬉しいなと思います。

今回はテーマが「空」ということで、「空」というモチーフが取り入れられていればどんな作品でもOKとのことだったんですが、せっかくなので空をなるべくメインに大きく描こうと思い、こんな感じの絵になりました。
今まで描いた絵の中で一番お気に入りの絵になったんじゃないかと思います。


この度は素敵な企画に参加させて頂き、どうもありがとうございました!

空アンソロ

ふんわりうさぎフォント

ふんわりうさぎフォント


フォント色



■収録文字


カタカナ、ひらがな、アルファベット(大文字・小文字)、記号が少し入っています。
すべて全角です。


■フォントの利用について


・無料でダウンロード出来ます。
・商用利用可能です。
・フォントデータの複製、改変、再配布は禁止します。
・フォントのダウンロードや使用の際のトラブルについて、当サイトは一切の責任を負いません。
・規約は予告なしに変更させていだきます。
・フォント名の表記や当サイトへのリンクをしていただけると嬉しいです。


■ダウンロード


ふんわりうさぎフォント.zip

パステルチェックパターン

ピンク大

オレンジ大

イエロー大

グリーン大

ブルー大

パープル大

ピンク小1

オレンジ小1

イエロー小1

グリーン小1

ブルー小1

パープル小1