การทำ Sprite ด้วย CSS

การทำ Sprite คือการทำ Animation จากรูปภาพหลายๆภาพเล่นต่อกันเพื่อให้เกินเป็นภาพเคลื่อนไหว ลองนึกภาพฟิมล์ภาพยนต์สมัยก่อนน่าจะพอนึกภาพออกครับ ซึ่งปัจจุบัน css เองสามารถทำ Animation เรี่ยงรูปแบบนี้ได้เองโดยไม่ต้องพึ่ง javascript ก็ได้

จากตัวอย่าง เราจะเริ่มต้นจากการหารูปที่ใช้สำหรับการทำ ซึ่งหาได้จากตามเว็บ ฟรี game art ต่างๆ จะมีรูปพวกนี้อยู่พอสมควร ซึ่งรูปที่ได้มาจะเป็นแบบนี้ครับ

ซึ่งรูปนี้ ยาว 720 px สูง 80 px ตัดได้ทั้งหมด 9 ช่อง (frame ละ 80*80 px) ซึ่งวิธีการทำรูปแล้วแต่คนถนัดเพราะมีทั้ง โปรแกรมสำเร็จ หรือในโปรแกรมแต่งรูปแต่ที่สำคัญคือความกว้างต่อ frame  ต้องทำกัน

หลังจากเตรียมรูปแล้วเราก็จะมาทำการ animation กัน

1 การทำ animation background

.gamebox{


  background-position: 0px 0px;
  background-repeat: repeat-x;
  background-image:url(bg1.jpg);
  width:600px;
  height:600px;
  margin:auto;
  position: relative;
  animation: animatedBackground 40s linear infinite;  /*  ในส่วนนี้คือการเรียก animation background ครับ */
    
}

@keyframes animatedBackground {
	from { background-position: 0 0; } 
	to { background-position: 100% 0; }
}

2 การทำ Animation ตัวอัศวิน และ มังกร ซึ่งส่วนสำคัญ คือ background possiton , step และเวลา ครับ

/*  Knight */
  .knight {
  position: absolute;
  bottom: 65px;
  width: 80px;
  height: 80px;
  left:35%;
  
  
  background: url(kinght.png) no-repeat;
  background-position: 0 0;
  cursor: pointer;
  animation: knight_walk  1s infinite steps(8);
}
.knight:hover {
  background-position: -640px 0;
  transition: background 1s steps(8);
}
@keyframes knight_walk {
  0% {
    background-position: 0 0;
  }
  100% {
    background-position: -640px 0;
  }
}

/*  Dragon Fly */
  .dragon {
  position: absolute;
  bottom: 150px;
  width: 80px;
  height: 80px;
  left:30%;
  
  
  background: url(dragon.png) no-repeat;
  background-position: 0 0;
  cursor: pointer;
  animation: dragon_fly  1s infinite steps(8);
}
.knight:hover {
  background-position: -640px 0;
  transition: background 1s steps(8);
}
@keyframes dragon_fly {
  0% {
    background-position: 0 0;
  }
  100% {
    background-position: -640px 0;
  }
}

ในส่วนของ code ทั้งหมดสามารถ Download ไปลองดูได้ครับ