은 PNG 파일에서 스프라이트를 만들기 위해 노력하고 항상 내가 어떤 명백한 일이 잘못 할 수있는 느낌이 pixi.js 초보자로서 마지막 문자

Question

입니다 - 나는 33의 사진을로드하려고 워드 게임

을 다음 코드를 사용하여 PNG 파일 (1980 X 60 픽셀 대형)에서 편지 (각 60 X 60 픽셀) :

var stage = new PIXI.Container(); 
var renderer = new PIXI.WebGLRenderer(1020, 1020); 
var boardDiv = document.getElementById('board'); 
boardDiv.appendChild(renderer.view); 

var darkSmallLetters = new Array(33); 
var darkLargeLetters = new Array(33); 
var whiteSmallLetters = new Array(33); 

PIXI.loader 
    .add('board' ,'/drawable-mdpi/game_board.png') 
    .add('dark_small_letters', '/drawable-mdpi/dark-letters-1980x60.png') 
    .add('white_small_letters', '/drawable-mdpi/white-letters-1980x60.png') 
    .load(init); 

function init() { 
    var board = new PIXI.Sprite(PIXI.loader.resources.board.texture); 
    stage.addChild(board); 

    for (var i = 0; i < 33; i++) { 
     var rect = new PIXI.Rectangle(i * 60, 0, 60, 60); 

     PIXI.loader.resources.dark_small_letters.texture.frame = rect; 
     darkSmallLetters[i] = new PIXI.Sprite(PIXI.loader.resources.dark_small_letters.texture); 
     darkSmallLetters[i].x = i * 60; 
     darkSmallLetters[i].y = i * 60; 
     stage.addChild(darkSmallLetters[i]); 

     PIXI.loader.resources.white_small_letters.texture.frame = rect; 
     whiteSmallLetters[i] = new PIXI.Sprite(PIXI.loader.resources.white_small_letters.texture); 
     whiteSmallLetters[i].x = 100 + i * 60; 
     whiteSmallLetters[i].y = i * 60; 
     stage.addChild(whiteSmallLetters[i]); 
    } 

    renderer.render(stage); 
} 

마지막 편지 쓰기합니다 (z) 그러나 단지가 전면적으로 그려집니다.

그래픽 리소스가 매우 간단하기 때문에 TexturePacker 또는 비슷한 프로그램을 사용하고 싶지 않습니다. 게임 보드와 가로로 2 줄의 문자 그림이 있습니다 (1234567abcdefghijklmnopqrstuvwxyz).

위의 코드에서 내가 뭘 잘못하고 있니?

Answer 1

당신은 BitmapText 예 확인할 수 있습니다 http://pixijs.github.io/docs/PIXI.extras.BitmapText.html 를 사용하지 않는 이유 : 당신이 정말로 그것을 그런 식으로 당신이 할 필요가 있다면 당신은 이미 BitmapText

에 당신을 위해 수행하는 일을 https://pixijs.github.io/examples/#/demos/text-demo.js

그 모든 계산을 Pixi.BaseTexture를 통해 Pixi.Texture를 만들어야합니다.