Jump to content

Draw a rectangle and an image atop of it

Alexander Farber

Recommended Posts

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() {

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);

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');

        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')

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


                for (var i = 0; i < 5; i++) {
                        var tile = new SmallTile();
                        tile.x = i * 100;
                        tile.y = i * 100;


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:


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


Link to comment
Share on other sites

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.

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...