Difference between revisions of "Tutorial:Fonts and Text (日本語)"

(New translation)
 
m (テキストの整形と描画)
 
(5 intermediate revisions by 2 users not shown)
Line 1: Line 1:
LÖVE へフォントを追加して使用するのはあまり複雑ではありませんが、留意しておかなければならないことは使用できるようにする前に設定を行う必要があると言うことです。フォント・オブジェクトからテキストを直接表示する方法は存在せず、現在のフォントに基づき常に <code>[[love.graphics.print (日本語)|love.graphics.print]]</code> 関数を経由してテキストは表示されます。 LÖVE で利用可能なフォントは三種類あります:
+
LÖVE でフォントを用いるのは、さほど難しいことではありませんが、気をつけることは使用前に設定を行うことです。フォント・オブジェクトからテキストを直接表示する方法は存在せず、現在のフォントに基づき常に <code>[[love.graphics.print (日本語)|love.graphics.print]]</code> 関数を用いてテキストは表示されます。 LÖVE で利用可能なフォントは三種類あります:
 
* 標準フォント (Bitstream Vera Sans)
 
* 標準フォント (Bitstream Vera Sans)
 
* FreeType 2 にて対応している任意のフォント・ファイル
 
* FreeType 2 にて対応している任意のフォント・ファイル
 
* グリフを内包する画像 (ImageFont)
 
* グリフを内包する画像 (ImageFont)
  
== 標準フォントを使用してフォント・オブジェクトを作成する ==
+
== 標準フォントでフォント・オブジェクトを作成する ==
標準フォントは誰でも利用可能であり下記のコード移用して作成することができます:
+
標準フォント (組み込みフォント) は下記のコードで作成します。外部ファイルの指定は不要です:
 
<source lang="lua">
 
<source lang="lua">
 
font = love.graphics.newFont(14) -- 数値はフォントの大きさを意味します。
 
font = love.graphics.newFont(14) -- 数値はフォントの大きさを意味します。
Line 11: Line 11:
  
 
== フォント・ファイルを使用してフォント・オブジェクトを作成する ==
 
== フォント・ファイルを使用してフォント・オブジェクトを作成する ==
フォント・ファイルは通常のファイルでインターネットからダウンロード (または自作) するものでありフォントの情報を内包しています。標準フォントの様にフォントの大きさとファイルのパスを指定して使用できます:
+
フォント・ファイルはインターネットからダウンロード (または自作) するものであり、このファイルはフォント情報から構成されています。標準フォントと同様、フォ、ントの大きさとファイルのパスを指定します:
 
<source lang="lua">
 
<source lang="lua">
 
font = love.graphics.newFont("AwesomeFont.ttf", 15)
 
font = love.graphics.newFont("AwesomeFont.ttf", 15)
Line 18: Line 18:
  
 
== 画像を使用してフォント・オブジェクトを作成する ==
 
== 画像を使用してフォント・オブジェクトを作成する ==
特別な画像の形式に全て依存するため、画像フォントについて解説するのは少し難しいです。これ[[Image:Resource-Imagefont.png|用例画像]]を参照すれば特定色により各々が分離され、一列に沿ったグリフを内包することが理解できるでしょう。この色はグリフを分離するために使用され全ての文字および一覧の最初から検出される必要があります(全ての方向は左から)。この画像に基づくフォントの作成方法は下記の通りです。
+
特別な画像の形式に全て依存するため、画像フォントについて解説するのは少し難しいです。これ[[Image:Resource-Imagefont.png|用例画像]]を参照すれば特定色により各々が分離され、一列に沿ったグリフから構成されていることが理解できるでしょう。この色はグリフを分離するために使用され全ての文字および一覧の最初から検出される必要があります(全ての方向は左から)。この画像に基づくフォントの作成方法は下記の通りです。
 
<source lang="lua">
 
<source lang="lua">
 
font = love.graphics.newImageFont("imagefont.png",
 
font = love.graphics.newImageFont("imagefont.png",
Line 29: Line 29:
  
 
== フォント・オブジェクトの使用 ==
 
== フォント・オブジェクトの使用 ==
いまフォント・オブジェクトを作成したので、現在のフォントを使用できるようにする前に設定する必要があります。それは下記のコードで完了します:
+
いまフォント・オブジェクトを作成したので、使用前に下記のコードにより現在のフォントを設定します。:
 
<source lang="lua">
 
<source lang="lua">
 
-- font = 以前に作成したフォント・オブジェクトです。
 
-- font = 以前に作成したフォント・オブジェクトです。
Line 45: Line 45:
  
 
== テキストの整形と描画 ==
 
== テキストの整形と描画 ==
まさに今は新規のフォント・オブジェクトがあるので、なにかに対して使用したいとします。テキストを描画するには単に <code>[[love.graphics.print (日本語)|love.graphics.print]]</code> 関数を呼び出します:
+
さて、新規のフォント・オブジェクトがあるので、なにかで使用したいとします。テキストを描画するには <code>[[love.graphics.print (日本語)|love.graphics.print]]</code> 関数を呼び出します:
 
<source lang="lua">
 
<source lang="lua">
 
love.graphics.print("This is some awesome text", 100, 100)
 
love.graphics.print("This is some awesome text", 100, 100)
Line 61: Line 61:
 
引数 '100' および '200' は、それぞれテキストの ''x'' 位置および ''y'' 位置です。LÖVE 0.6.0 以前では、テキストを描画するために <code>[[love.graphics.draw (日本語)|love.graphics.draw]]</code> にて代用されていました。
 
引数 '100' および '200' は、それぞれテキストの ''x'' 位置および ''y'' 位置です。LÖVE 0.6.0 以前では、テキストを描画するために <code>[[love.graphics.draw (日本語)|love.graphics.draw]]</code> にて代用されていました。
  
しかし、 LÖVE では <code>[[love.graphics.print (日本語)|love.graphics.print]]</code> 関数を使用することで単語の包装と揃え方を指定したテキストを描画することができます:
+
しかし、 LÖVE では <code>[[love.graphics.print (日本語)|love.graphics.print]]</code> 関数を使用することで単語の折り返しと揃え方を指定したテキストを描画することができます:
 
<source lang="lua">
 
<source lang="lua">
 
love.graphics.printf("A really long sentence which will probably be broken into many pieces by my love.", 500, 100, 250, 'right')
 
love.graphics.printf("A really long sentence which will probably be broken into many pieces by my love.", 500, 100, 250, 'right')
Line 88: Line 88:
  
 
== そのほかの言語 ==
 
== そのほかの言語 ==
{{i18n|Tutorial::Fonts and Text}}
+
{{i18n|Tutorial:Fonts and Text}}

Latest revision as of 02:19, 9 December 2019

LÖVE でフォントを用いるのは、さほど難しいことではありませんが、気をつけることは使用前に設定を行うことです。フォント・オブジェクトからテキストを直接表示する方法は存在せず、現在のフォントに基づき常に love.graphics.print 関数を用いてテキストは表示されます。 LÖVE で利用可能なフォントは三種類あります:

  • 標準フォント (Bitstream Vera Sans)
  • FreeType 2 にて対応している任意のフォント・ファイル
  • グリフを内包する画像 (ImageFont)

標準フォントでフォント・オブジェクトを作成する

標準フォント (組み込みフォント) は下記のコードで作成します。外部ファイルの指定は不要です:

font = love.graphics.newFont(14) -- 数値はフォントの大きさを意味します。

フォント・ファイルを使用してフォント・オブジェクトを作成する

フォント・ファイルはインターネットからダウンロード (または自作) するものであり、このファイルはフォント情報から構成されています。標準フォントと同様、フォ、ントの大きさとファイルのパスを指定します:

font = love.graphics.newFont("AwesomeFont.ttf", 15)

ダウンロードしたフォントには著作権があり、その一部には改変禁止や商用利用禁止などの使用許諾条件または利用制限があることに留意してください。

画像を使用してフォント・オブジェクトを作成する

特別な画像の形式に全て依存するため、画像フォントについて解説するのは少し難しいです。これ用例画像を参照すれば特定色により各々が分離され、一列に沿ったグリフから構成されていることが理解できるでしょう。この色はグリフを分離するために使用され全ての文字および一覧の最初から検出される必要があります(全ての方向は左から)。この画像に基づくフォントの作成方法は下記の通りです。

font = love.graphics.newImageFont("imagefont.png",
    " abcdefghijklmnopqrstuvwxyz" ..
    "ABCDEFGHIJKLMNOPQRSTUVWXYZ0" ..
    "123456789.,!?-+/():;%&`'*#=[]\"")

警告: 画像の始点および終点に関しての分離色を確認してください。不正な場合は最後の文字 (この場合は " ) は動作しません。

フォント・オブジェクトの使用

いまフォント・オブジェクトを作成したので、使用前に下記のコードにより現在のフォントを設定します。:

-- font = 以前に作成したフォント・オブジェクトです。
love.graphics.setFont(font)

一回呼び出すことでも TTF フォントを直接的に使用することができます。

love.graphics.setNewFont(filename, size)

または、この場合は標準フォントになります。

love.graphics.setNewFont(size)

テキストの整形と描画

さて、新規のフォント・オブジェクトがあるので、なにかで使用したいとします。テキストを描画するには love.graphics.print 関数を呼び出します:

love.graphics.print("This is some awesome text", 100, 100)

同様に数値も簡単に描画することができます:

num = 15
love.graphics.print(num, 100, 150)

標準のテキスト表示関数は改行 ( '\n' 文字) を扱うことができ、テキストを左寄せで描画します:

love.graphics.print("This is the first line\nThis is the second one.\n(and a third)\n\nfifth", 100, 200)

引数 '100' および '200' は、それぞれテキストの x 位置および y 位置です。LÖVE 0.6.0 以前では、テキストを描画するために love.graphics.draw にて代用されていました。

しかし、 LÖVE では love.graphics.print 関数を使用することで単語の折り返しと揃え方を指定したテキストを描画することができます:

love.graphics.printf("A really long sentence which will probably be broken into many pieces by my love.", 500, 100, 250, 'right')

ここでは、引数 '500' および '100' は x および y 位置である場合は、 '250' はテキストの最大幅であり、 'right' はテキストの揃え方です。

この方法では単語自動行送り制限および x 位置が 0 をウィンドウ幅を渡す場合は、比較的に簡単に中央揃えのテキストを全て描画します:

love.graphics.printf("This text will be centered no matter what.\n(and you LOVE it)", 0, 400, 800, 'center')

揃え方の値を省略した場合は、常に標準でテキストは左揃えになります:

love.graphics.printf("Aligned to the left, yes very much so.", 100, 500, 150)

これはテキストを描画する方法です。特定の関数、および使用方法に関する詳細はドキュメンテーションを参照してください。

注意: 全てのフォント (画像フォントも同様) は全て現在の色により影響されるため、配色状態を 'modulate' する必要はありません。



そのほかの言語