phina.js에서 웹 글꼴을 사용해보십시오!
7665 단어 phina.jsCoffeeScript
소개
모처럼 게임을 만들고 있는데, 브라우저상에서의 게임의 경우 폰트가 환경 의존이 되기 쉽다.
이것은 JavaScript 라이브러리 인 phina.js에서도 동일하다고 생각합니다.
그래서 단말의 폰트 제약에 영향을 받지 않는 목적으로, Web 폰트가 있으므로, 이것을 사용해, phina.js 로의 게임내에서도 제대로 된 게임에 있던 폰트를 사용해-!
라는 것으로, 해 보았습니다.
라고, 작년 와 같은 출시로 카피하면서…
작년에는 tmlib.js 였지만 나중에 이어 왔습니까? phina.js 그렇다면 어떻게됩니까?
시도해 보겠습니다.
먼저 결과를 쓰면 ...
tmlib.js에는 여러 가지가있었습니다.
phina.js에서는 Asset으로 설정하는 것만으로 보통 사용할 수 있습니다!
HTML 파일
HTML은 거의 샘플로 남아 있습니다.
보통입니다. 특히 변경할 필요는 없습니다.
index.html<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8' />
<meta name="viewport" content="width=device-width, user-scalable=no" />
<title>phina.js:Madomagi Web Font sample</title>
<script src="javascripts/phina.js"></script>
<script src="javascripts/main.js"></script>
</head>
<body></body>
</html>
스크립트 (CoffeeScript)
개시시의 처리는 이하와 같다.
main.coffeephina.globalize()
# メイン処理(ページ読み込み後に実行される)
phina.main ->
app = GameApp
assets:
font:
'Madoka Runes': 'fonts/maqbsm.ttf'
startLabel: 'main'
width: 640
height: 480
backgroundColor: 'rgba(150,150,150,1.0)'
app.run()
이번에는 GameApp게임을 시작하기 전에 폰트 파일을 불러옵니다.
assets 의 키는 로드할 자료의 유형(type)을 나타내며 phina.js에 의해 결정됩니다.
지금, assets/image/sound/spritesheet/script 가 있는 것 같습니다.
font 의 경우는 asset 를, 다음과 같이 지정합니다.
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8' />
<meta name="viewport" content="width=device-width, user-scalable=no" />
<title>phina.js:Madomagi Web Font sample</title>
<script src="javascripts/phina.js"></script>
<script src="javascripts/main.js"></script>
</head>
<body></body>
</html>
phina.globalize()
# メイン処理(ページ読み込み後に実行される)
phina.main ->
app = GameApp
assets:
font:
'Madoka Runes': 'fonts/maqbsm.ttf'
startLabel: 'main'
width: 640
height: 480
backgroundColor: 'rgba(150,150,150,1.0)'
app.run()
font 로 사용하는 폰트의 이름 (좋아하게 붙여도 OK) 메인 장면은 다음과 같습니다.
MainScene.coffee
# MainScene クラスを定義
phina.define 'MainScene',
superClass: 'CanvasScene'
init: (op) ->
@superInit(op)
labelText = 'mon mignon prêt-à-porter'
# ラベルを生成
@fromJSON
children:
label_1:
className: 'Label'
arguments:
text: labelText
fill: 'rgba(0,0,0,1.0)'
fontSize: 24
x: @gridX.center()
y: @gridY.span(4)
label_2:
className: 'Label'
arguments:
text: labelText
fill: 'rgba(0,0,0,1.0)'
fontFamily: 'Madoka Runes'
x: @gridX.center()
y: @gridY.span(6)
fontFamily 의 Label 에 fontFamily 의 assets 에서 지정한 키 font 를 설정하기만 하면 됩니다.요약하면 일반적으로 Asset에서 font 파일을 설정하고 fontFamily로 지정하면됩니다!
CSS를 쓸 필요가 없어져, 로드의 타이밍의 문제라고도 없어져, 매우 간단하게 되었습니다.
샘플
phina.js:Madomagi Web Font sample
이런 식으로 표시되어야합니다.
github 리포지토리 : fukuyama/phina.js-webfont-sample
참고
phina.js
사용 글꼴
tmlib.js Advent Calendar 2014
Reference
이 문제에 관하여(phina.js에서 웹 글꼴을 사용해보십시오!), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/YFukuyama/items/052454c6cbcf91881f77텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
