Last updated: 2015 -2014. Kajiyama                    [ 目次に戻る ]

文字の描画に日本語フォント(画像)を使う



  1. Processingがキャンバス(実行画面)に日本語を描画するためにはProcessing用のVLWフォーマットの日本語フォント(画像)を作成する.

    (1) キャンパスでのフォント表示は画像表示と同じと考える.jw-cadと同じように文字は画像と同じ扱いをする.

    (2) 英数字のアスキー(ASCII: American Standard Code for Information Interchange)文字の場合は簡単で,直接次のように記述する.

    textSize (48); // フォントサイズ指定:48
    text ("Hello world !!", 50, 100);//文字の描画


    (3) 日本語を描画するためには,パソコンの日本語フォントをVLWフォーマットに変換し,これをプログラムで使用する手続きが必要.

    // 日本語フォントを作成し指定する呪文
    PFont font = createFont("MS Gothic",48,true);//文字の作成
    textFont (font); // 選択したフォントを指定する

    textSize( 48); // フォントサイズ指定:48
    text ("初めまして", 50, 100);//文字の描画



  2. 日本語で描画するには日本語フォントを準備し使用する.

    windowsでは,最初は「MSゴシック MS Gothic」 「MS明朝 MS Mincho」 「MSPゴシック MS PGothic」 「MSP明朝 MS PMincho」で済ますように.


  3. パソコンにインストールされている日本語フォントを確認する.

    1. 方法1 windowsコンピュータが持っている使用可能なフォントは,「コントロールパネル」->「フォント」で確認できる.

      「フォント」の書体をクリックし内容が確認できる.




    2. 方法2 println( PFont.list( ) )を使用し,windowsコンピュータが持っている使用可能なフォントを確認する.

      ソースファイル
      //ファイル名:sketch_140521a.pde
      // コンピュータが持っているフォントリストを表示
      // ただし,Processingで使うためには,
      // VLWフォーマット変換が必要
      
       println(PFont.list());
      
      
      
      
      
      

      実行結果


  4. [方法1] createFont( )でVLWフォーマットの日本語フォントを作成し使用する----この日本語フォントを全員が持っている場合

    1. 変数をフォント型PFontで指定する.

    2. フォント型の変数で使用するフォント名を指定し作成し,Processingに格納する.

    3. textFont(変数名)で格納したフォントを選択する.

      ・createFont( )やloadFont( )で作成したフォントを選択し,使用できるようにする.

    4. text("文章",X座標, X座標)で格納したフォントをProcessingで使用する.

    PFont 変数名 ;@フォント変数の定義//
    
    変数名 = createFont("フォント名",フォントサイズ,true ); // AフォントをVLWフォーマットに変換・作成し格納.
    //trueを付けると文字のギザギザをなくす.
    
    textFont(変数名); // BVLWフォーマットのフォント,サイズを指定する
    
    text("文章",先頭文字の左下のX座標, 左下のy座標); // C文字・文章を描画する
    



    ソースファイル
    //ファイル名:sketch_140521b.pde
    //フォントをVLWフォーマットに変換し使用する
    
    void setup() {
     size(400,200); //実行画面の大きさ
    
     PFont font;//@変数fontがフォント変数であると定義
    
     //AフォントをVLWフォーマットに変換・作成
     font = createFont("MS Mincho", 48, true);//MS明朝 「MS Mincho」
     //font = createFont("MS Gothic", 48, true);//MSゴシック 「MS Gothic」
    
     textFont(font, 48);//Bフォント,サイズを指定する
    
    }
    
    void draw() {
    
     text("初めまして", 50, 100);//C文字・文章を描画する
     text("123ABCDE", 50, 150);
    
    //save("font_03a.jpg");// 実行結果を画像形式で保存
    //noLoop();//繰返し処理を止める
    }
    
    
    実行結果
    MS明朝 「MS Mincho」 MSP明朝 「MS PMincho」 MS ゴシック 「MS Gothic」 MSPゴシック 「MS PGothic」

  5. [方法2] 「Tool」->「Create Font...」で日本語フォント準備: 

          コンピュータが持ってるフォントを,VLWフォーマットに変換し,Processingが使用できる「フォント」を作成する.


          ----相手がこの日本語フォントを持っていない場合,プログラムと一緒に,作成したフォントは「DATA」フォルダに入れて渡す.

          ----相手が同じフォントを持っていればプログラムを渡し,以下の面倒なことはしない.



    1. 「Create Font」で使用したいフォントを作成し,「Sketch Folde」の中の「DATA」フォルダーの中に保存する

      1. メニューから 「Tool」->「Create Font...」 を選択すると,@「Create Font」画面が現れる.

        (1) リストの中から 使用したい日本語フォント「Ms-Mincho」を選択すると,印字見本が現れる.

        (2) フォントの「Size」を指定し,文字を滑らかにする「Smooth」にチェックを入れる.

      2. 次に「Characters..」をクリックし,A「Character Selector」設定画面に進む.

        (1) ◯ Default Characters を選択すると日本語は省かれる.

        (2) ◯ All Characters を選択すると日本語・英数字の全ての文字を選択.

        (3) ◯ Specific Unicode Blocks を選択すると以下で選んだ文字だけになる.

      3. 日本語だけに限定するには,A「Character Selector」画面で,「◯ Specific Unicode Blocks」を選択する.

        次に,ひらがな「Hiragana」,カタカナ「Katakana」と漢字・表意文字「CJK Unified Ideographs」の項目にチェックを入れる

        この選択により,ひらがな,カタカナと漢字のフォントが作成する.

        「OK」を押すと,数十秒してVLWフォーマットのフォント「MS-Mincho-48.vlw」が作成される.数十メガの大きさ.

        MS-Mincho-48.vlw」がプログラムに記述するフォント名になる.

      4. 「Create Font」画面で「OK」を押す.

        ・複数のフォントを使用したい場合は,以上の選択を繰り返しす.

      5. 確認.「Sketch」->「Show Sketch Folde」をクリックすると,

        使用中の「Sketch」フォルダーの中にB「DATA」フォルダーが作成され,この中にフォント「Ms-Mincho-48.vlw」を確認する.




      @ Create Font 画面


      Hiragana」,「Katakana」と「CJK Unified Ideographs
      の項目にチェックを入れると日本語だけ作成する

      A Character Selector 画面


    2. 日本語フォント使用の手続き

      1. 作成したフォントを「Sketch Folde」の中の「DATA」フォルダーの中に保存した.

      2. フォント型の変数で使用するこのフォント名を読み込み,Processingに格納する.フォント型の変数はPFont.

      3. loadFont( )で作成したフォントを選択し,使用できるようにする.

      4. textFont(変数名,フォントサイズ);で格納したフォントをProcessingで使用することを宣言する.

      5. text("文章",X座標, X座標);で格納したフォントをProcessingで使用することを宣言する.

        PFont 変数名;//@フォント変数の定義
        
        変数名 = loadFont("フォント名.vlw"); // A「DATA」フォルダーの中のフォント.VLWを読込む
        
        textFont(変数名,フォントサイズ); // B使用するフォントとサイズを指定する
        
        text("文章",先頭文字の左下のX座標, 左下のy座標); // C文字・文章を描画する
        
        



        ソースファイル
        //「Sketch Folde」の中の「DATA」フォルダーの中に
        //保存したフォントを使用する
        
        void setup() {
         size(400,200); // 実行画面の大きさ
        
         PFont font2; // @変数font2がフォント変数であると定義
        
         // A「DATA」フォルダーの中のフォント.VLWを読込む
         font2 = loadFont("MS-Mincho-48.vlw");
        
         textFont(font2, 48);// B使用するフォントとサイズを指定する
        
        }
        
        void draw() {
        
         text("改めまして", 50, 100);// C文字・文章を描画する
         text("123ABCDE", 50, 150);// 表示できない理由を考える
        
        //save("font_03b.jpg");// 実行結果を画像形式で保存
        //noLoop();//繰返し処理を止める
        }
        
        
        実行結果
        「ひらがなHiragana」,「カタカナKatakana」 と「漢字CJK Unified Ideographs」の項目に チェックを入れたので日本語フォントしか 作成していない.英数字は描けない. 「Character Selector」設定画面で 「・All Characters」を選択すると 日本語と英数字が描ける.

[ 目次に戻る ]