Draw a rectangle and an image atop of it

[Alexander Farber]

Good morning!

I am trying to create a class which would act as a draggable letter tile in a word game.

I would like to draw a rectangle and above it I would like to draw a letter image.

Here is my SmallTile class extending PIXI.Sprite (is that class a good choice here?):
 

"use strict";

function SmallTile() {
        PIXI.Sprite.call(this);
        this.draw();
}

SmallTile.prototype = Object.create(PIXI.Sprite.prototype);
SmallTile.prototype.constructor = SmallTile;

SmallTile.WIDTH = 60;

SmallTile.sDarkLetters  = {};
SmallTile.sWhiteLetters = {};
SmallTile.sDarkIndices  = {};
SmallTile.sWhiteIndices = {};

SmallTile.init = function(darkLettersTexture, whiteLettersTexture, darkIndicesTexture, whiteIndicesTexture) {

        for (var i = 0; i < LETTERS.length; i++) {
                var letter = LETTERS[i];
                var rect = new PIXI.Rectangle(i * SmallTile.WIDTH, 0, SmallTile.WIDTH, SmallTile.WIDTH);

                SmallTile.sDarkLetters[letter]  = new PIXI.Texture(darkLettersTexture, rect);
                SmallTile.sWhiteLetters[letter] = new PIXI.Texture(whiteLettersTexture, rect);
        }

        for (var i = 0; i <= 15; i++) {
                var letter = LETTERS[i];
                var rect = new PIXI.Rectangle(i * SmallTile.WIDTH, 0, SmallTile.WIDTH, SmallTile.WIDTH);

                SmallTile.sDarkIndices[i]  = new PIXI.Texture(darkIndicesTexture, rect);
                SmallTile.sWhiteIndices[i] = new PIXI.Texture(whiteIndicesTexture, rect);
        }

}

SmallTile.prototype.draw = function() {
        this.lineStyle(2, 0x333333, 1);
        this.beginFill(0xFF00BB, 0.25);
        this.drawRoundedRect(0, 0, SmallTile.WIDTH, SmallTile.WIDTH, 8);
        this.endFill();
}

SmallTile.prototype.setLetter = function(letter) {
        this.texture = sDarkLetters[letter];
}

And here is my main code (the textures load fine, I've tested that by drawing them before):
 

"use strict";

var LETTERS = [ '*', 'A', 'B', 'C', 'D', 'E', 'F' ];


jQuery(document).ready(function($) {

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

        var stage = new PIXI.Container();

        var loader = new PIXI.loaders.Loader('/drawable-mdpi/');
        loader.add('board1' ,'game_board_1.png')
                .add('dark_small_letters', 'dark-letters-1980x60.png')
                .add('dark_large_letters', 'dark-letters-3564x108.png')
                .add('dark_small_indices', 'dark-indices-960x60.png')
                .add('dark_large_indices', 'dark-indices-1728x108.png')
                .add('white_small_indices', 'white-indices-960x60.png')
                .add('white_small_letters', 'white-letters-1980x60.png')
                .load(init);

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

                SmallTile.init(
                        loader.resources.dark_small_letters.texture.baseTexture,
                        loader.resources.white_small_letters.texture.baseTexture,
                        loader.resources.dark_small_indices.texture.baseTexture,
                        loader.resources.white_small_indices.texture.baseTexture
                );

                for (var i = 0; i < 5; i++) {
                        var tile = new SmallTile();
                        tile.setLetter(LETTERS[i]);
                        tile.x = i * 100;
                        tile.y = i * 100;
                        stage.addChild(tile);
                }

                renderer.render(stage);
        }
});

Since pixi.js doc says that PIXI.Sprite indirectly extends PIXI.Graphics class, I am trying to call drawing methods directly on the object, but that produces the error:

Quote

ReferenceError: this.lineStyle is not a function

Please advise me how to do my task properly.

I have used some Adobe Flash (and Flex) before and there I could draw to flash.display.Sprite.graphics property.

But PIXI.Sprite does not seem to have such a property

Thank you
Alex

 

[Fatalist]

Sprite does not extend Graphics. Sprite and Graphics both extend Container. 

You could create the child Graphics object manually, but it would appear in front of the letter. You can extend Graphics instead of Sprite and have the letter as its child, or extend Container and have background Graphics and letter Sprite as its children.

[ivan.popelyshev]

sDarkLetters is not a global var, you have to specify "SmallLetters.sDarkLetters" instead of just "sDarkLetters".

Also, yes, you either add 1 Graphics element inside and 1 Sprite, either you extend Graphics and add Sprite inside.