HTML5 게임 만들기, Splash Screen

카테고리 없음

HTML5 게임 만들기, Splash Screen

Soul-Learner 2012. 6. 7. 16:10

기본 프레임워크를 저장한 스크립트를 로드한 후에는 초기화면을 출력한다

Web Font 다운로드 및 프로젝트에 설정


  - http://www.google.com/webfonts 에 접속하여 slackey, geo 으로 검색하여 사용할 2개의 오픈소스 폰트를 검색한다
  - 검색된 결과에서 'Add to Collection' 를 누르고 오른쪽 위에서 'Download your Collection' 을 선택하여 다운로드한다
  - 다운로드한 *.ttf 파일을 복사하여 *.woff 파일을 생성한다 iOS에서는 woff를 지원하지 않으므로 woff는 무시되고 ttf포맷을 사용한다.
  - 프로젝트 내에 fonts 폴더를 생성하고 그 안에 *.woff, *.ttf 파일을 복사해 넣는다

Geo-Regular.ttf

Slackey.ttf

index.html


<!DOCTYPE html>
<html>
<head>
<meta charset="EUC-KR">
<title>HTML5, 카드 맞추기 게임</title> 
<link rel="stylesheet"  href="../styles/main.css" />
<link rel="stylesheet"  href="../styles/fontfaces.css" />
<script src="../scripts/modernizr.js"></script>
<script src="../scripts/loader.js"></script>
</head>
<body>
<div id="game">
	<div class="screen"  id="splash-screen">
		<h1 class="logo">Jewel <br/>Warrior</h1>
		<span>Click to continue</span>
	</div>
	<div class="screen"  id="main-menu"></div>
	<div class="screen"  id="game-screen"></div>
	<div class="screen"  id="high-scores"></div>
</div>
</body>
</html>

fonts/fontfaces.css


@font-face {
	font-family: "Slackey";
	font-weight: normal;
	font-style: normal;
	src: url("../fonts/slackey.woff") format("woff"),
		url("../fonts/slackey.ttf") format("truetype");
}

@font-face {
	font-family: "Geo";
	font-weight: normal;
	font-style: normal;
	src: url("../fonts/geo.woff") format("woff"),
		url("../fonts/geo.ttf") format("truetype");
}

main.css


body {
	margin : 0;
}

#game {
	position : absolute;
	left : 0;
	top : 0;
	width : 320px;
	height : 480px;
	font-family: Geo;
	background-color : rgb(200,200,100);
}

#game .screen {
	position : absolute;
	width : 100%;
	height : 100%;
	display : none;
	z-index : 10;
}

#game .screen.active {
	display : block;
}

#splash-screen {
	text-align : center;
	padding-top : 100px;
}
#splash-screen .continue {
	cursor : pointer;
	font-size : 30px;
}
.logo {
	font-family : Slackey;
	font-size : 60px;
	line-height : 60px;
	margin : 0;
	text-align : center;
	color : rgb(70,120,20);
	text-shadow : 1px 1px 2px rgb(255,255,0),
	-1px -1px 2px rgb(255,255,0),
	5px 8px 8px rgb(0,0,0);
}
.no-textshadow .logo {
	filter : dropshadow(color=#000000,offX=3,offY=3);
}