モーリーのメモスマートフォン用の表示で見るモーリーのメモアプリ開発等(プログラミング、CG作成)、興味を持ったことを実践してまとめるブログです。CocosbmGlyphはビットマップフォントの作成ソフトです。複数の文字にまとめて、グラデーション、縁取り線、影付け等の効果を加えることが出来ます。作成したフォントはCocos2d-x等のビットマップフォント用のラベルで使用できます。ロゴ用に画像として出力することもできます。いったフォントが簡単に作れます。TrueTypeフォント等のアウトラインフォントを読み込んでベースとしています。bmGlyphは英語版のみですが、日本語のフォントも使えます。Storeからできます。QUERAUD開発ツール¥1,200操作はそれほど難しくないと思います。画面を触ってみるとわかる感じです。メニューOpen:開く現在のウインドウでbmGlyphプロジェクトを開きます。現在のプロジェクトが保存済みの場合は、確認を求めずに上書きします。保存していない場合は、新規ファイルとして保存します。現在のプロジェクトを新規ファイルとして保存します。(保存されたプロジェクトは現在のウインドウで編集します。copy:名前をつけて保存(コピー作成)現在のプロジェクトを新規ファイルとして保存します。(保存されたプロジェクトは別のウインドウを開いて編集します。Setting(出力設定)に従ってプロジェクトを出力します。Settingウインドウが表示されます。All:すべて選択テクスチャ表示上ですべての文字を選択します。(各文字が赤い四角で囲まれます。文字の選択状態を反転します。テクスチャ/カラー/グラデーション)の変更は、選択中の文字にのみ作用します。テクスチャモードプレビューモードまたはテクスチャモードに切り替えます。プレビューモード時に、ビュー内に背景画像をドラッグ&ドロップできます。text:プレビューテキストプレビューテキストの文字を変更します。\n(改行文字)を使用できます。文字の間隔を調整します。このオプションを使えば各文字をくっつける表現が可能です。yOffset:xオフセットとyオフセットデバイス上でうまく表示されるように最終的なバウンディングボックスを調整します。バウンディングボックスは赤で表示され、cocos2dのバウンディングボックスのように(同じ方法で)配置されます。これによりコーディングの際に簡単にラベルにセンタリング出来ます。640x1136:背景サイズの選択プレビューモード時に背景を読み込みます。*ビュー内に直接背景画像をドラッグ&ドロップすることもできます。背景の色を変更します。背景画像が設定されている場合は消去されます。背景画像を90°回転します。Save:プレビューテキストの保存プレビューテキストをPNG形式でエクスポートします。テキストを書いて、デバイス上でレンダリングすることなく、スプライトまたは絵として使うことが出来ます。name:フォント名フォントを選択します。緑色表示はbmGlyphがカーニングテーブル(文字間隔の設定データ)を見つけたことを意味します。黒色表示はカーニングがないことを意味します。Filter:検索フィルタフォントリストをフィルタリングします。ttf:ttfの読み込みお使いのシステムにインストールされていない.ttfファイルを読み込みます。文字が見つからない場合の代替フォントを指定します。*私の環境では機能しませんでした。size:フォントサイズスライダーもしくは数値入力でフォントサイズを調整します。height:行の高さ行の高さを設定します。プレビューテキストに\n(改行文字)を使用している場合はプレビューモードで結果を確認できます。width:スペース(空白文字)の幅スペースの幅を設定します。プレビューテキストにスペースを使用している場合はプレビューモードで結果を確認できます。全ての文字のxAdvance値(文字幅)固定にします。数値のHUD表示(画面に常時表示する情報)に適しています。オフセットチェックした場合、影の半径とオフセットとストロークサイズによって各文字の文字間隔を自動的に増加させます。これはバージョン1.9.2までの設定でした。バージョン1.9.3以降はこのチェックボックスはデフォルトでは未チェックです。以前に保存されたプロジェクトはこのオプションがチェックされた状態で読み込まれます。(太字斜体)等のフォントのスタイルを選択します。kernings:カーニングの使用カーニングテーブル(文字間隔の設定データ)を読み込みます。(現在、kernフォーマットの0とcampフォーマットの0と4がサポートされています。)カーニングはプレビューモードで使用され、アトラスファイル(ビットマップフォントを1つにまとめた画像ファイル)に表示されます。使用する文字をカスタマイズします。Supplement文字セットを追加できます。現在の文字は消去されます。カスタムした範囲(最大1000)を追加できます。文字セットのリストをポップアップ表示します。任意の文字セットを選択して現在のリストに追加することが出来ます。button:マジックワンドボタン文字の入力蘭で文字を選択してからマジックワンドボタンをクリックします。選択した文字はテクスチャシートで選択されます。文字の入力蘭をクリアします。Editorこのエディタは文字ごとにxOffset(xオフセット)、yOffset(yオフセット)、xAdvance(文字幅)を調整できます。任意の文字(例えば数字ごとにxAdvance値を調整出来ます。)またはカスタム画像に対して使用できます。文字を選択するには、テクスチャシートまたはプレビューモードのいずれかで文字を右クリックします。高さ選択した文字または画像の幅と高さです。xAdvance:xオフセット、yオフセット、文字間隔デフォルトのxオフセット、yオフセット、文字間隔の値にプラスします。カスタム画像のデフォルトの値は0です。image:カスタム画像このチェックボックスはオフの操作だけ出来ます。カスタム画像を削除し、オリジナルの文字を使用します。カスタム画像の追加についてインポートしたカスタム画像はサイズ変更が出来ません。正しいサイズのものを選択して下さい。bmGlyphはスプライトシートエディタではありません。(たとえこのオプションが実装間近だとしても!)可能なのは、既存の文字をカスタム画像で置き換えることだけです。画像だけを追加することは出来ません。ゲーム内で残機を表示したい場合、あなたは"#3"という文字をラベルに書くだけです。”#”の文字はハートのようなカスタム画像に置き換えられます。カスタム画像の追加テクスチャシートで対象の文字を探して下さい。(ヒント:見つけられない場合、文字入力欄で対象の文字を選択し、マジックワンドボタンをクリックすると、文字が選択されて簡単に見つけることが出来ます。)文字に画像をドラッグ&ドロップすると、その文字が緑色の四角で囲まれて、すぐに文字と画像が置き換えられます。プレビューモードに切り替えて、結果を確認することが出来ます。Editorを使用して画像の位置と間隔を調整することが出来ます。全ての文字に影を追加します。xとyのオフセット、影の半径、そして影の色を変更します。Outer(外側)の影を設定します。両方同時に設定することは出来ません。全ての文字の縁取り線を設定します。色と線幅を調整します。Gradient(グラデーション)またはColor(カラー)モードのどちらかを選択して下さい。縁取り線はCenter(中央)、Inner(内側)、Outer(外側)のいずれかにすることができます。文字を塗りつぶしません。Shadow(影の追加)が有効であっても、塗りつぶし部分は透明です。選択した色で塗りつぶされます。光沢:塗りつぶしの色が光沢があるようにします。(塗りつぶしの色は暗い色のほうが良い結果を得られます。)Texture:テクスチャボックスに画像をドラッグ&ドロップします。文字はこの画像で塗りつぶされます。使用するファイルは200×200程度の小さいものにして下さい。大きいファイルの場合は更新がとても遅くなるかもしれません。linear:グラデーション(線形)グラデーションを適用します。傾き、開始と終了の色を選択します。radial:グラデーション(放射状)放射状のグラデーションを適用します。中心点のxとyを設定します。field"値から陰影付きの画像を作り出します。画像の処理方法について説明します。アルファフィルタにマスクが適用されます。Mode(塗りつぶしモード)"のオプションで白色を使いたくなるでしょう。Field"フィルタが適用されます。パラメータによりエンボス効果を増減することが出来ます。Field"画像に陰影付きマテリアルが適用されます。"distance"パラメータにより見た目を調整出来ます。注意:マテリアル画像を変更するには、デフォルト画像に新しい画像をドロップして下さい。(画像のサイズが大きすぎると処理が遅くなります。)このエフェクトにより、様々なことが可能です。Alias:アンチエイリアスアンチエイリアスの有無を設定します。色を変更するにはコントロールポイント(円)をダブルクリックして下さい。コントロールポイントを削除するにはコントロールポイントをバーの外にドラッグ&ドロップして下さい。コントロールポイントを追加するにバーをダブルクリックして下さい。Sizeは単に幅と高さを調整するだけです。全ての文字にそのサイズを適用しようとします。onlyにチェックされている場合、テクスチャシートは2の乗数(2の5乗(32)から2の12乗(4096)まで)だけになります。チェックされていない場合、サイズは128pixel増減します。(バージョン1.9.2まで同じ動作をします。高さ画像の出力形式です。透明な背景を使用します。背景色を使う場合はチェックを外して下さい。Background:背景この色は出力画像には表示されません。希望の色で作業するためだけです。px)文字ごとにバウンディングボックスの四方がXピクセル広がります。2)文字は中央に表示されます。これにより他のツールで新しい効果(変形、外側を発光等)を加える事ができます。Padding:パディング各文字間のパディングを調整して下さい。AutoSD特性を使用している間は2pxもしくは4pを維持することをおすすめします。文字がパックされる方法を主導で変更します。良い結果を得るにはデフォルトのままにして下さい。選択した設定でソートできます。Reversed:逆順ソート順を逆にするかどうか設定します。デフォルトの設定でより良い結果が得られます。Refresh:リフレッシュ強制的に再パックします。通常全てが自動で再パックされます。最良のパッキングアルゴリズムを使用しませんが、グリッド上に文字を整列します。文字の幅/高さを設定することができます。最良の文字サイズ/グリッドサイズを得るためにサイズを試す必要があります。このオプションは(フォントアトラスファイルを使用する必要がない)基本的なフォントパーサーを持っている場合にのみ必要です。カーニングや高度なパラメータが使用されないのでフォントによっては変に見えるかもしれません。SettingはPublishボタン(ウインドウ上部)をクリックすると表示されます。Targets:ターゲットたくさんのターゲットを追加できます。できるだけ高い解像度で作業するようにして下さい。Name(ファイル名)、Suffix(サフィックス=接尾辞=ファイル名の末尾に付ける文字列)等をデフォルトのターゲットとして設定することです。それから希望するスケール(50の場合は、現在のターゲットの50%のスケールで複製)に現在のターゲットをduplicate(複製)します。作業の補助としてスケール比リマインダーが表示されます。Suffix:サフィックスサフィックス(-ipadhd、-ipad、@4x、-hd、@2x等)を入力する必要が有ります。空白のままに出来ます。その場合はデフォルトのフォント名が使用します。format:エクスポート形式Cocos2d、Corona(.fntフォントアトラスとhd拡張を使用します。)Sparrow(xml形式の.fntフォントアトラスと@2x拡張を使用します。(.txtフォントアトラスと-hd拡張を使用します。leftシステムは、テクスチャの開始と終了座標、文字のサイズ、そしてオフセット/xAdvanceパラメータからuvCoordinatesを計算します。Kit(".atlas"ディレクトリが作成されます。Kitについてのチュートリアルを御覧ください。Quality:SD品質SDフォーマットに縮小処理する時の補完品質です。bmGlyphはテクスチャシートを新しい文字のサイズで再描画します。これによりは特にSDバージョンの値の丸めによる悪影響や間違ったオフセットを回避します。テクスチャで文字の位置が異なった順序になる場合があることにご注意下さい。(縁取り線の幅、影、拡張オフセット、固定の高度なパラメータも動作中に変更されます。)TextureとCoordinatesチェックボックスTextureとCoordinatesチェックボックスによって、テクスチャまたはアトラスファイルだけをエクスポート出来ます。ファイルは次のようにエクスポートされます。全てのサフィックスにチェックする:(Targetsボックスで)各ターゲットをクリックする必要が有ります。有効なサフィックスを設定します。MEはそのサフィックスが無効であることを示します。(AutoSD特性を持った)"-hd"ファイルを使用するためには、"AppDelegate.m"でretinaサポートが有効であることを確認して下さい。supported");CCLabelBMFontを作成し、文字を追加して下さい。日本語を使用したい場合は、日本語フォントを選択して下さい。使用する文字を設定します。ゲームのスコアの場合は『スコア:,0123456789点』とする等、使用する文字を設定します。『手順2』で日本語フォントを選択していないと『スコア点』の文字は『テクスチャ/プレビュー』に表示されません。Mode』等を自由に設定して下さい。『PUBLISH!』ボタンをクリック『ファイル名.fnt』と『ファイル名.png』ファイルが出力されます。Studio』でプロジェクトにインポートすれば、『BitmapLabel』にセットして使用することが出来ます。Text』で使えるのは『Charset』に入力した文字だけです。Designer』が紹介されているのを見ますが、こちらは月額料金制(969円/月)です。AppStoreでは購入できません。値段と購入しやすさで『bmGlyph』を選びましたが、どのぐらい機能に違いがあるんでしょうかね。『bmGlyph』は希望を言えば、縁取り線を太さ可変で3重以上に出来ればいいのになと思います。Excelのデータを音声で読み上げさせます。その2:Inkscapeこちらの記事の続きです。Studio2』です。2を使ってListViewを作成しました。下記の記事の続きです。(8)参加グループプログラミングリンクはてなブログブログをはじめる週刊はてなブログはてなブログProはてなブログをはじめよう!mmorleyさんは、はてなブログを使っています。ブログを報告するスターをつけました引用をストックしましたストック一覧を見る閉じる引用するにはまずログインしてくださいログイン閉じる引用をストックできませんでした。再度お試しください閉じる限定公開記事のため引用できません。