css sprites

[Ditto11]

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:

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 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:

Code: Select all

	background-size: 372px 124px;
	

to

Code: Select all

	background-size: 434px 124px;
	

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)

[Ditto11]

hmm, continuing to play/experiment with it .. now it's working ... Not sure what I did differently .., ut obviously I didn't update something before, which I'm doing now ..

but all good .. working now ..

[RicardoRix]

I'm guessing is still a browser cache thing.

You can check using the F12 console. See if the css of a div has actually changed.

I'm guessing you already know you should add some new background-positions for your newly created pieces.

[Ditto11]

I'm guessing is still a browser cache thing.

You can check using the F12 console. See if the css of a div has actually changed.

I'm guessing you already know you should add some new background-positions for your newly created pieces.

Yep .. got it working there .. I think something didn't save properly/cache properly . and I finally "did it right" .. so it's working now ..
Thank you!

[ufm]

Totally unrelated question: who owns 'Dragonchess' license now?
Gary Gygax passed away and TSR is defunct. Maybe Wizards of the Coast?

[Ditto11]

Totally unrelated question: who owns 'Dragonchess' license now?
Gary Gygax passed away and TSR is defunct. Maybe Wizards of the Coast?

Not 100% sure, but would assume so .. they would have inherited everything TSR ...
That said, as I understand it (and will have to dig a bit more) ... I believe the rules and such for dragonchess were released publicly in Dragon magazine .. and (hopefully) have no license issues with them but yeah .. got a bit of checking for that to do ...