1

PlayN の v1.3.1 を使用しています。この問題は、次の Google グループ スレッドで議論されていますが、提案された提案を実装する方法がわかりません。

https://groups.google.com/forum/?fromgroups#!topic/playn/kiE2iEYJqM0

おそらく、誰かがサンプルコードを提供できるでしょう。現在、この回答のHTML リンクで参照されている手法に従っています。

https://stackoverflow.com/a/9116829/1093087

私の問題: ゲームのホーム画面で、読み込まれたフォントを使用してテキストを表示します。Java版では正常に動作します。ただし、HTML 版では、最初はテキストが表示されません。次の画面で、または後でホーム画面に戻ると、テキストが正しく表示されます。そのため、Google グループのスレッドで説明されているように、フォントの非同期読み込みが原因であると結論付けました。

私の救済策は、画像を数秒間表示するスプラッシュ スクリーンを追加することでした。これにより、テキストが表示された画面にリダイレクトされる前に、フォントが読み込まれる機会が与えられました。しかし、どれだけ遅延を設定しても、テキストは表示されません。

ゲームとフォントをロードする HTML ファイルは次のとおりです。

<!DOCTYPE html>
<html>
  <head>
    <title>mygamePlayn</title>
    <!-- fonts -->
    <style>
      @font-face {
        font-family: "DroidSans-Bold";
        src: url(mygame/fonts/DroidSans-Bold.ttf);
      }
      @font-face {
        font-family: "UbuntuMono";
        src: url(mygame/fonts/UbuntuMono-Bold.ttf);
      }
    </style>
  </head>
  <body bgcolor="black">
    <script src="mygame/mygame.nocache.js"></script>
  </body>
</html>

最初に表示されないテキストを生成するコア Java コードを次に示します (ただし、それ以外の場合は機能します)。

public static CanvasImage generateTextImage(String text, String fontName,
    Integer fontSize, Integer fontColor, Style fontStyle, Integer padding) {
    Font font = graphics().createFont(fontName, fontStyle, fontSize);
    TextFormat fontFormat = new TextFormat().withFont(font).withTextColor(fontColor);

    TextLayout layout = graphics().layoutText(text, fontFormat);
    Integer width = (int) layout.width() + padding * 2;
    Integer height = (int) layout.height() + padding * 2;

    CanvasImage textImage = graphics().createImage(width, height);
    textImage.canvas().drawText(layout, padding, padding);

    return textImage;
}
4

1 に答える 1

2

私はついに私の問題の解決策を見つけたと思います。次のやや回りくどい方法でGoogle WebFont Loaderを使用する必要がありました。

1) フォント (この場合はDroidSans-Bold、Inconsolata、およびUbuntuMono-Bold ) を PlayN プロジェクトのresources/fontsディレクトリに保存しました。

2)で、ローカルに保存したフォントの定義をresources/css追加するfonts.cssスタイルシートを追加します。@font-face私のfonts.cssファイル:

@font-face {
    font-family: DroidSans;
    src: url('../fonts/DroidSans-Bold.ttf');
}
@font-face {
    font-family: Inconsolata;
    src: url('../fonts/Inconsolata.ttf');
}
@font-face {
    font-family: UbuntuMono;
    src: url('../fonts/UbuntuMono-Bold.ttf');
}
@font-face {
    font-family: UbuntuMono;
    font-weight: bold;
    src: url('../fonts/UbuntuMono-Bold.ttf');
}

注: フォント ファミリ名には、PlayN コードのフォント名に使用した値と同じ値を使用します。たとえば、次のように PlayN コードに DroidSans フォントをロードします。

Font font = graphics().createFont("DroidSans", fontStyle, fontSize);

3) 次に、ゲームの html ファイル ( ) で Google WebFont Loader を使用してMyGame.html、ゲームが読み込まれる前にフォントを読み込みます。私のMyGame.htmlファイル:

<!DOCTYPE html>
<html>
  <head>
    <title>MyGame</title>
    <style>
      body {
        background-color:black;
        color:white;
      }
    </style>

    <!-- Google AJAX Libraries API -->
    <script src="http://www.google.com/jsapi"></script>
    <script>
        google.load("jquery", "1.4.2");
        google.load("webfont", "1");

      WebFontConfig = {
        custom: { families: ['DroidSans', 'UbuntuMono'],
          urls: [ 'mygame/css/fonts.css' ]
        },
        loading: function() {
          console.log("loading fonts");
        },
        fontloading: function(fontFamily, fontDescription) {
          console.log("loading font: " + fontFamily + "-" + fontDescription);
        },
        fontactive: function(fontFamily, fontDescription) {
          console.log(fontFamily + "-" + fontDescription + " is active");        
        },
        fontinactive: function(fontFamily, fontDescription) {
          console.log(fontFamily + "-" + fontDescription + " is INACTIVE");
        },
        active: function() {
          console.log("font-loading complete");
        },
      };

      google.setOnLoadCallback(function() {
        console.log("Google onLoad callback");
        WebFont.load(WebFontConfig);
      });
    </script>

  </head>

  <body>
    <div id="playn-root">
        &nbsp;
        <script src="mygame/mygame.nocache.js"></script>
    </div>
  </body>

</html>

コールバックのコンソール ログはWebFont.load、PlayN ゲーム コードの前にフォントが正常に読み込まれたことを確認するのに役立ちました。

googleapis.comを通じて提供されるフォントで WebFont Loader を使用することをお勧めしますが、PlayN コードとスタイルシートの間の参照を同期する方法がわかりませんでした。(今見てみると、フォントを自分でホストしたくない場合は、googleapi.com スタイルシートにリストされているのと同じ URL を使用できたはずです。) いずれにせよ、このパターンは問題を解決するようです。 .*

※グーグルクロームの場合。他のブラウザはテストしていません。

于 2012-07-26T04:49:04.467 に答える