Hoping to get some help on using sprites on BGA . I've done reading on this, and I do understand how it works, however, everytime I try to modify something, it just goes sideways.
So I'm using a clone/copy of the Chess game as a base.
In there, there is a "pieces.png" file, which, of course, has the white and black pieces for the game (ie rook, knight, etc.)
Then in the .css file we have the following:
So far, so good. I understand what's happening with all of that. (I think).
So for my learning/testing step, I'm adding a new piece. So first, I edit the pieces.png. I see that it's 384x128 in size, with 2 rows of 6 pieces. So each piece is 64x64. So I increase the image width +64. So new image is now: 448x128
I drop my new white/black pieces in the image ...
Now .. I'm not "using" those pieces yet ... I just want to add them for now .. and make sure everything still works.
I increase the line:
to
ie +62 .. to keep up with same ratio that it has in reference the .css files entries of "62px" for width and height)
Nothing else should change, the existing symbols are still in the same place. yet when I run it ... there are no pieces . nothing is displayed.
I would have assumed if I was off by a bit, I'd see .. "something"? but I can't figure out what I'm doing wrong?
(note: yep, did force refresh a couple times ... no help there this time)
So I'm using a clone/copy of the Chess game as a base.
In there, there is a "pieces.png" file, which, of course, has the white and black pieces for the game (ie rook, knight, etc.)
Then in the .css file we have the following:
Code: Select all
.chess_piece {
width: 62px;
height: 62px;
background-size: 372px 124px;
background-image: url( 'img/pieces.png');
background-repeat: no-repeat;
position: absolute;
}
.white_piece.rook_symbol { background-position: 0px 0px; }
.white_piece.knight_symbol { background-position: -62px 0px; }
.white_piece.bishop_symbol { background-position: -124px 0px; }
.white_piece.queen_symbol { background-position: -186px 0px; }
.white_piece.king_symbol { background-position: -248px 0px; }
.white_piece.pawn_symbol { background-position: -310px 0px; }
.black_piece.rook_symbol { background-position: 0px -62px; }
.black_piece.knight_symbol { background-position: -62px -62px; }
.black_piece.bishop_symbol { background-position: -124px -62px; }
.black_piece.queen_symbol { background-position: -186px -62px; }
.black_piece.king_symbol { background-position: -248px -62px; }
.black_piece.pawn_symbol { background-position: -310px -62px; }
So for my learning/testing step, I'm adding a new piece. So first, I edit the pieces.png. I see that it's 384x128 in size, with 2 rows of 6 pieces. So each piece is 64x64. So I increase the image width +64. So new image is now: 448x128
I drop my new white/black pieces in the image ...
Now .. I'm not "using" those pieces yet ... I just want to add them for now .. and make sure everything still works.
I increase the line:
Code: Select all
background-size: 372px 124px;
Code: Select all
background-size: 434px 124px;
Nothing else should change, the existing symbols are still in the same place. yet when I run it ... there are no pieces . nothing is displayed.
I would have assumed if I was off by a bit, I'd see .. "something"? but I can't figure out what I'm doing wrong?
(note: yep, did force refresh a couple times ... no help there this time)