ゲームエフェクトデザイナーのブログ | A Real-Time VFX Artist's Blog

About Making Materials on UE, Making Tools with C#, etc

C# RPG風にテキストメッセージを1文字ずつ表示させる

案外ググっても出てこないのでメモ。

テストで作ったものはこちら。
Button1 を押すと Label1 に文字列を一文字ずつ表示します。

f:id:moko_03_25:20180924201537g:plain

やっていることは以下のような感じ。

・各行ごとに string型の変数を用意

・foreach で string型の引数から1文字ずつ取り出して文字列に「追加」する
 そして少し待機させる
 空白文字だった場合は待機させない

・行間も待機させる


空白文字の場合は待機させると不自然になり、スルーすると自然になりました。

コードはこんな感じ。
非同期処理について全くと言って良いほど理解していない状態なので、その点ご了承ください。

private async void button1_ClickAsync(object sender, EventArgs e)
{
    string s1 = "ほにゃらら は レベルアップしました!" + "\r\n";
    string s2 = "\r\n" + "ちから が 2 あがった!";
    string s3 = "\r\n" + "すばやさ が 1 あがった!";
    string s4 = "\r\n" + "かしこさ が 2 あがった!";

    string output = "";

    int waitTimeChar = 50; // 一文字の待機時間
    int waitTimeLine = 300; // 行間の待機時間

    await OutputMessage(s1);
    await Task.Delay(waitTimeLine);

    await OutputMessage(s2);
    await Task.Delay(waitTimeLine);

    await OutputMessage(s4);
    await Task.Delay(waitTimeLine);

    await OutputMessage(s3);


    // 関数:1文字ずつ表示する
    async Task OutputMessage(string s)
    {
        // foreachで1文字ずつ処理(後半)
        foreach (char c in s)
        {
            // 1文字追加
            output += c.ToString();

            // ラベルに表示
            this.label1.Text = output;

            // 空白文字以外にディレイさせる
            if ("" != c.ToString())
            {
                // ディレイ
                await Task.Delay(waitTimeChar);
            }
        }
    }
}


以上、参考になれば幸いです。

※自分用のメモ

文字列から1文字取得する、文字列内の文字を列挙する - .NET Tips (VB.NET,C#...)

C# で Thread.Sleep はあきまへん

async、awaitそしてTaskについて(非同期とは何なのか) - SE(たぶん)の雑感記

C# Taskの待ちかた集

非同期メソッド - C# によるプログラミング入門 | ++C++; // 未確認飛行 C

C# Labelの主なプロパティ

良く忘れるのでメモ。

デフォルトから変えることが多いものを中心にメモっています。

◆動作

 

◆配置

AutoSize ‥ Textの長さに合わせて自動的にサイズが決まる
       右寄せしたい場合などは False にしておく

◆表示

TextAlign ‥ Text を右寄せにしたりできるが AutoSize を False にしないと効かない

C# ComboBoxの主なプロパティ

良く忘れるのでメモ。

デフォルトから変えることが多いものを中心にメモっています。

◆動作



◆直に記述しないといけないもの

 

標準のプロパティで設定できないこと

プルダウン内の項目の右寄せ・中央寄せ(センタリング)。
オーナードロー(自前で描画する)を行わないとできないようです。
参考:C#を攻略しよう、オーナードロー

C# Buttonコントロールの枠線を消す方法

.NET Frameworkを使ったWindows Form Aplicationで、Button Control の Border を無くしたい‥
つまり「ボタンの枠線(輪郭線・境界線)を消したい」場面があります。

例えばボタンに背景画像を設定してアイコンに見せたいような時です。

こちら、もちろん消せますがVisual Studioのフォームデザイナのボタンコントロールのプロパティには見当たらないので、初学者が詰まるところだと思います。

そしてググっても案外スっと回答が出てこない。なのでメモっておきます。

続きを読む

C# コントロールの表示をボタンで切り替える

Formアプリで2つのDataGridViewをタブで切り替えるようなことをしたいのですが、TabControlは標準のプロパティでは外観をほとんど変えられないので、単純にボタンと表示/非表示の切り替えだけでやってみました。

まずフォームデザイナで下図のような感じでボタンとDataGridViewを2つずつ配置します。

f:id:moko_03_25:20180919220720j:plain

ボタンクリックイベントを追加してこちらのように記述します。
ボタンを押したら片方のDataGridViewを表示、もう片方を非表示にするだけ。

private void button1_Click(object sender, EventArgs e)
{
    if (dataGridView1.Visible == true)
    {
        return;
    }
    else
    {
        dataGridView1.Visible = true;
        dataGridView2.Visible = false;
    }
}

private void button2_Click(object sender, EventArgs e)
{
    if (dataGridView2.Visible == true)
    {
        return;
    }
    else
    {
        dataGridView1.Visible = false;
        dataGridView2.Visible = true;
    }
}


するとこのような感じで正常に動作しました。

f:id:moko_03_25:20180919220716g:plain

ただし、最初から片方のDataGridViewを非表示にしておかないと、どちらのボタンを押しても何も反応しないという状態になってしまいました。なぜ。。

お次は、2つのDataGridViewを同じ位置にピッタリと重ねて、ボタンもタブのように隣接させてみました。すると、まるでタブで切り替えているようになりました。

f:id:moko_03_25:20180919220711g:plain

アクティブなボタンの輪郭が太くなるのは不細工なので、ボタン初期化時に border = 0 で枠線を消してしまうと良いです。こちらの記事で解説しています。

また、タブっぽい画像を背景にするというのも良さそうです。

C# Twitterアプリを作ってみる2

前回の記事の続き。

とりあえずツイートとタイムラインの取得ができるというだけですが、形にはなったので初学者な方のために公開しておきたいと思います。

GitHubはこちら。
GitHubにも書いていますが、ソリューションを開いたらまずはNuGetでCoreTweetをインストールして、開発者サイトからAPI Key等を取得してコード内で参照するようにしてください。そうしないとエラーが出てビルドも実行ファイルの起動もできません

こちらのGIFアニメのような感じで文章のツイートと、自身のタイムラインのツイートを最新のものから任意の数だけ取得してTextBoxに表示します。
ページ数(引数 page)というのは、一度に取得する数(引数 count)を1ページとして、何ページ先のものを取得するかという指定のようです。でもあまり先のページは読み込めない様子。。

f:id:moko_03_25:20180917015151g:plain

続きを読む

C# Twitterアプリを作ってみる1

プログラム初心者がいきなりTwitterアプリを作ろうとすると思いのほか大変な印象でした。
例え任意の文字列を投稿するだけでも。。

なのでざっくりと備忘録としてメモっておきたいと思います。

大まかな流れ


① 開発者サイトへのアカウント登録

② 開発者サイトから「API Key」「API secret Key」などを入手

Visual StudioWindows Form Application の新規プロジェクトを作成

④ NuGet で Twitter APIC# で利用するライブラリ「CoreTweet」をインストール

ソースコードに以下のような処理を記述(方法はいくつもあるのでその一例)

 1. API Key を使ってTwitterアプリ連携認証ページへアクセス
  ※認証するとウェブ上にPINコードが表示される
 2. ダイアログボックスを表示するなどしてPINコードの入力を受け付ける
 3. 入力されたPINコードを使用してトークンを取得
  ※ここでようやくTwitterへの読み書きが可能に
 4. ツイートしたりタイムラインを表示したりと実行したい処理を書く

開発者サイトへのアカウント登録


Twitter公式のAPIを利用するには、まず公式の開発者サイトへの登録が必要なようです。
なんと面倒な。。

Twitter Developer Platform — Twitter Developers

理由はスパム投稿など不正アプリ防止のようで、登録したは良いもののアプリからのツイート数制限など色んな制限が設けられている模様‥

アカウント登録の際には全て英語で入力が必要で、それはGoogle翻訳で十分なのですが、どんなアプリを何のために作りたいかの説明を300字以上書かないと登録を完了できません。。

開発者サイトから「API Key」と「API secret Key」を入手


開発者サイトにログインしている状態だと右上にアカウント名が表示されますが、そのプルダウンメニューで「Apps」を選択、開いたページ先で「Detail(詳細)」ボタンを押す。

f:id:moko_03_25:20180916025605j:plain

f:id:moko_03_25:20180916025603j:plain

そしてジャンプ先のページ上部にある「Keys and tokens」タブを開くと「API Key」と「API secret Key」などの記載があるのでこちらをForm上で使用します。

f:id:moko_03_25:20180916025601j:plain

f:id:moko_03_25:20180916025559j:plain

最初どこに記載されているのか分からず探しました。。分かりにくい。。

「CoreTweet」をインストール


Twitter APIC# で利用するライブラリは色々あるみたいですが、ググってみた感じでは「CoreTweet」が最もポピュラーで良さそうな印象です。

こちらを NuGet で探してプロジェクトにインストールします。

具体的にコードを記述していく


ここは色んなサイトにそれぞれ色んな方法でサンプルが紹介されています。

最初はこちらのあたりを参考にしました。

C#でTwitterにつぶやく - プログラミング素人のはてなブログ

クイック チュートリアル · CoreTweet/CoreTweet Wiki · GitHub

C#でTwitterアプリを作る 第1回 OAuth - らこらこブログ

OAuth認証を利用しクライアントアプリケーション(デスクトップアプリケーション)から Twitterにつぶやきを投稿する (C#プログラミング)

.NET向けのTwitterライブラリ「CoreTweet」の使い方まとめ - 酢ろぐ!

認証ひとつとっても3種類くらい方法があるようで‥

とりあえずはPINを発行してそこからトークンを取得するというものを試してみました。

アプリ実行時には、例えばFormに配置したボタンをユーザーがクリックすると、ブラウザが自動で開いてTwitterアプリ連携認証ページを開き、「認証」ボタンを押した先で表示されるPINコードを入力して欲しい訳ですが、手っ取り早くテキスト入力欄があるダイアログボックスを開いて入力待機させようと思いました。

任意のURLをブラウザで開く


まず、指定のURLをブラウザで開かせるのは非常に簡単でした。

外部アプリケーションを起動する、ファイルを関連付けられたソフトで開く - .NET Tips (VB.NET,C#...)

こちらを参考にして‥

Process.Start(”アクセスするURL”.AbsoluteUri);


たったこれだけでいけるようです。

つまりアプリケーションに関連付けられたファイルを指定してやればそのアプリで開いてくれるように、URLを直接渡すだけでブラウザで開いてくれるんですね。便利!

ボタンクリックイベントでPINコードを取得する


PINコードを入手したは良いものの、それをダイアログボックスで入力してもらって取得したい訳ですが、どうも C# 標準のダイアログボックスにテキストボックス付きのものは無い様子。

そこで、Visual Basicの「InputBox」クラスを利用する方法を試してうまくいきました。

という訳で、起動する度にPINコードを入力する手順を踏む必要がありますが、こちらのような記述でとりあえずTwitterへの投稿ができました!

private void button1_Click(object sender, EventArgs e)
{
    // API Key と API secret Key を入力(ハードコーディング時は注意)
    var session = OAuth.Authorize("API Keyを入力", "API secret Keyを入力");

    // ブラウザでTwitterアプリ連携認証ページを開く
    Process.Start(session.AuthorizeUri.AbsoluteUri);

    // ダイアログボックスを表示
    var pincode = Microsoft.VisualBasic.Interaction.InputBox( "PINコード を入力してください", "title", "", -1, -1);

    // トークン取得
    var tokens = OAuth.GetTokens(session, pincode);

    // ツイートする
    tokens.Statuses.Update(status => "hogehoge");
}


やったー! 成功!

ちなみに API Key と API secret Key は誰にも知られてはいけないものなので、コード内に直接書く(ハードコーディングする)場合には注意が必要そうです。GitHubでバージョン管理していてうっかりPublicにしてしまったりとか、ありそう。。

こちらの記事内にも書かれていたのですが、セキュリティ対策のひとつとしてパスワードのようなものは環境変数に登録してソースコードで参照するような形にすると良いと。

なるほど‥!

そういう発想は全くありませんでした。。勉強になる。。

という訳で、とりあえず投稿までは上記の流れでいけたということで。

追記:この後、PIN取得を省略する形でツイートとタイムライン取得まで実装できました。
   その解説はこちら

C# ファイルパス・フォルダパスをリストアップするツール

指定したフォルダ内のファイルまたはフォルダを全てリストアップするツールを作りました。
こちらからDLできます。

GitHubにも実行ファイルとソリューション一式をアップしています。
ライセンスは MIT License です。

f:id:moko_03_25:20180915040627g:plain

ファイルリストとフォルダリストのどちらを作成するかをラジオボタンで選んでおいてから「List up」ボタンでリストアップするだけのシンプルなものです。

過去に似たようなツールを作っていますが、不便なのをそのままにしていたので一から作りました。

▼こちらは指定フォルダ以下のファイルを全てリストアップした場合
 フォルダパスとファイル名を別の列に分離して表示します。
 サイズをByte・KiB・MiBで出しています。

f:id:moko_03_25:20180915040623j:plain

▼こちらは全てのサブフォルダをリストアップした場合
 「pass」の列しか表示されません。

f:id:moko_03_25:20180915040622j:plain

実装はシンプルなので、使用者によっては以下のようなあたりで不満が出るかも。

▼全体的なこと
・ファイルを開くダイアログでフォルダを選択したい
・サブフォルダを対象に含めなくて良い時がある
CSVで出力して欲しい
・xlsxで出力して欲しい
・表に結果を出すのはいらない
・Copy to Clipboard ボタン名が長くて邪魔
・Clear ボタンは別にいらない

▼ファイルリストの場合
・特定の拡張子だけリストアップしたい(または除外したい)
・フォルダパスとファイル名を分離しなくて良い時がある
・サイズはByteかKBかMBかを選んで表示させたい
・サイズは小数点第何位まで表示するか指定したい
・大量にファイルがあると時間がかかるので非同期にしてフリーズしないで欲しい
・ ↑ 同じ理由でプログレスバーを表示して欲しい

▼フォルダリストの場合
・フォルダごとにファイル総数と総ファイルサイズを出したい
 現状はこちらを使用していただければ‥

 
このあたりは将来、気が向いたら拡張するかも。。
特に非同期処理とプログレスバーとxlsxでの出力は試してみたい。

     *      *      *     *     *

余談ですが、プログラマさんがこういったツールを作成する場合はCSVで出力することがほとんどだと思います。エクセルで開けば表の状態で閲覧できますし、ログとして保管していくのにも便利ですし、他のツールに読み込ませる中間ファイルとして汎用的で便利というのもあると思います。

でも、自分は表からコピペが馴染む感じで。

CSVで出力しても出力先のフォルダを開いてCSVを開いて、そのままエクセルでは編集せずにいったん全選択コピーしてテキストエディタに貼り付けて正規表現マクロで整形してエクセルに貼り付けて編集する‥という流れで表を作ることが多いので、CSV挟むとむしろ少し手順に感じてしまうんですよね。。

エクセルで先に表のデザインを作っておいて値だけ後から貼り付けることも多くて。

追記:上記のような作業時はXMLでデザインを用意しておいてCSV流し込むのが一番良い?

ちなみにCSVを扱う場合の注意として、1項目の中にカンマが含まれてる場合・タブスペースが含まれている場合などの対処が必要だったりと案外面倒な部分もあるので注意が必要のようです。と言っても、そのあたり全てフォローされたサンプルやライブラリは探せばすぐ見つかりそうでもあります。

twitterのモーメント一覧

自分以外の人のモーメントにアクセスする方法、またログインせずに自分のモーメントにアクセスする方法が分からなかったので、こちらにリンクを貼っておきたいと思います。

モーメント、色々機能が足りなさ過ぎて力を入れてるようにはとても思えないのだけど‥そのうちモーメントがまるっと削除されたりしそうでこわい。。

続きを読む

「ゲームプランナーのドキュメント作成例<基本編>」がKindleストアでリリースされました!

安 幸村さんの「ゲームプランナーの参考例」シリーズ最新作の宣伝になります!

と思っていたら翌日にはリリースされていました‥!!
Kindle Unlimitedに加入している方は無料で読めますっ

表紙イラストは「eldenka(@eldenka)」さん!

女の子が一生懸命、仕様書を書いている姿‥!
そして机の上に広がるミニマムなファンタジーRPG感がとても素敵です‥!
ロゴは私が担当しました!‥が、拙いロゴデザインがイラストを台無しにしている感もあり‥自分に絶望しつつな感じで‥ごめんなさい精進します‥ごふっ‥

という訳で本書について、Amazonの紹介文そのままですがこちらにもペタリ!


 ゲーム開発の現場で、プランナーはどの様に仕様書を作成すればいいのか?

 仕様書の実装へ向けて、現場でどの様に動くべきなのか?
「自立したプランナー」をテーマとした物語を通して、プランナーの実務を解説します。

【目次】
はじめに
Introduction
第1章 苦情
第2章 ドキュメントの構成
第3章 ビジョン
第4章 仕様の作成とは
第5章 仕様書の作成
第6章 打ち合わせ
第7章 メンテナンスと実装確認
第8章 再生
Conclusion
第9章 ドキュメント作成の要点
第10章 「自立したプランナー」を目指して
終わりに

本書は小説の形を取りながら、架空の会社で働く新人プランナーの子と、彼女が一人前になるべくメンターとして導く先輩のお話です。そして物語に登場する架空のゲームの仕様書をサンプルとして解説がされています。

その仕様書に添えられるゲーム画面用の素材をお手伝いさせていただきました。
キャラクターの立ち絵とか、背景の酒場や寺院、アイコンなど。。

f:id:moko_03_25:20180831030053j:plain

f:id:moko_03_25:20180831030044j:plain

自分は背景はほとんど描けないので、、ゼロから描いてたら間に合わないと思い、UE4で球・円柱・立方体・円錐・アーチのプリミティブを組み合わせて作りました。書いてて恥ずかしいのですが、、建物の体を成してないし、色々アレです。。建物の構造からちゃんと調べないとダメですね。。

参考資料はほぼPinterest

でも仕様書内の図はアーティストに伝えたいイメージが伝わればいいのですよ‥!(開き直り)

あと、スマホやKndleで見た際に仕様書は恐らくかなり小さく表示されるので、分かりやすい見た目にして、モノクロなのでキャラが手前に乗っても大丈夫なよう全体的に明るくコントラストを抑えたトーンにしています。

作ること自体は楽しかったので、一度ちゃんと構造から勉強して作ってみたい。

       *        *        *        *


という訳で、本作も大変な力作ですので、ぜひお手に取って頂ければ幸いです!

そして今後も「ゲームプランナーの参考例」シリーズは続いていく予定だそうなので、ぜひぜひご注目いただければと思います‥!

※こちらも Kindle Unlimited で無料です!