phina.js 【phina.js】소를 피할 만한 게임을 만들었습니다(?) github 페이지에 올라 있으므로 부담없이 놀아보세요. 스크린 샷을 보면 바로 알 수 있다고 생각하지만 빌어 먹을 게임입니다. 이번에는 이런 느낌의 빌어 먹을 게임을 만드는 방법을 조금 소개합니다 당 판정 등 힘들 것 같은 일은하고 싶지 않기 때문에 솔직하게 게임 라이브러리를 사용합니다 시간이 많이 걸리지 않고 게임을 만들고 싶다면 "phina.js"를 추천합니다. phina.js는 일본제... phina.js게임 제작자바스크립트게임parcel phina.js에서 웹 글꼴을 사용해보십시오! 모처럼 게임을 만들고 있는데, 브라우저상에서의 게임의 경우 폰트가 환경 의존이 되기 쉽다. 이것은 JavaScript 라이브러리 인 phina.js에서도 동일하다고 생각합니다. 그래서 단말의 폰트 제약에 영향을 받지 않는 목적으로, Web 폰트가 있으므로, 이것을 사용해, phina.js 로의 게임내에서도 제대로 된 게임에 있던 폰트를 사용해-! 라는 것으로, 해 보았습니다. 라고, 와 같은... phina.jsCoffeeScript [phina.js] 이미지의 색상을 변경하는 방법 (마스크) 사용법 AssetManager 에 추가한 다음 사용하거나 직접 텍스처로 사용할 수 있습니다.maskImage(色を変えたい asset, 変更後の色, 新しい asset の名前) 처리 할 이미지와 동일한 크기의 이미지 처리를위한 장면을 만듭니다 장면의 배경색을 변경하려는 색상으로 설정 Sprite에서 장면에 색을 바꾸려는 이미지를 추가합니다 Sprite blendMode 를 destination-... HTML5자바스크립트phina.js캔버스 [phina.js] 요소를 스크롤 할 수있는 액세서리를 만들어 보았습니다. phina.js의 어드벤트 캘린더 2017의 7일째입니다. 6일째의 기사를 읽고, 스스로 제대로 실장해 보고 싶다고 생각해 보았습니다. 클래스 자체는 구현하고 있으면, 상당히 길어져 버렸으므로, 코드는 에 있어 있습니다. phina.js를 로드한 후 이 URL을 로드하여 사용할 수 있습니다. <script src="https://rawgit.com/simiraaaa/8c0d6bf92cc4b0... phina.js캔버스자바스크립트게임HTML5 phina.js의 clip과 blendMode에서 놀았습니다. 우선은 이하의 게임을 해보고 싶습니다. (소리가 나옵니다) 주목해 주었으면 하는 것은 화면 천이할 때등의 원형의 이펙트와, 게임중에 스포트라이트가 맞았듯이 주위가 어두워지는 연출의 부분입니다. 이들은 각각 clip과 blendMode라는 기능을 사용하여 실현됩니다. 환경 phina.js v0.2.2 clip()은 canvasAPI의 clip과 같고, 지정한 패스의 범위내만을 렌더링 하는 메소... 캔버스자바스크립트phina.js 게임 작성 튜토리얼(마인 스위퍼)(최종회)【마크 기능의 추가】 ※지금까지의 튜토리얼은 에 정리하고 있습니다. 에서는 게임 오버와 클리어 처리를 추가했습니다. 이번에는 마지막 시간으로 마크 기능을 추가합니다. 마크 기능은 스스로 폭탄이라고 판단한 패널을 마크하여 열 수 없게 하는 기능입니다. 마크 기능 추가 MainScene의 변경점 this.mode라는 변수로 모드를 관리합니다. 마크 모드이면, 패널이 터치되었을 때에 그 패널이 아직 열려 있지 않고, ... 튜토리얼phina.js게임 제작자바스크립트HTML5 【phina.js】게임 작성 튜토리얼(15퍼즐)(그 3)【피스의 터치】 ※지금까지의 Tips는 에 정리하고 있습니다. ←→ 지난번에는 15퍼즐 조각에 숫자를 표시했습니다. 이번에는 외형의 변화는 없지만, 조각에 터치 이벤트를 추가하여 결과를 알 수 있도록 콘솔에 출력시킵니다. 코드는 다음과 같습니다. 터치 이벤트 추가 조각 작성시의 처리를 다음과 같이 변경합니다. 에서 오브젝트의 터치를 유효하게 하려면 , obj.setInteractive(true) 로 설정합니... 튜토리얼phina.js게임 제작자바스크립트HTML5 【phina.js】게임 작성 튜토리얼(15퍼즐)(그 2)【숫자의 표시】 ※지금까지의 Tips는 에 정리하고 있습니다. ←→ 마지막에는 15 퍼즐 조각을 배치했습니다. 이번에는 다음과 같이 15 퍼즐 조각에 숫자를 표시합니다. 코드는 다음과 같습니다. 숫자 표시 숫자를 표시하려면 Label 클래스를 사용합니다. 이를 위해 Piece 클래스를 다음과 같이 변경합니다. init 함수에 num이라는 인수를 만들고 초기화 시 숫자를 제공합니다. this.num에 주어진 ... 튜토리얼phina.js게임 제작자바스크립트HTML5 【phina.js】게임 작성 튜토리얼(15퍼즐)(그 1)【피스의 배치】 ※지금까지의 튜토리얼은 에 정리하고 있습니다. 이 튜토리얼에서는 유명한 슬라이드 퍼즐인 15퍼즐을 phina.js로 만들고 싶습니다. 다음과 같이 15퍼즐 조각을 배치합니다. 코드는 다음과 같습니다. 상수 정의 조각 클래스 정의 나중의 편의성을 생각하고 phina.define에서 다음과 같이 클래스화합니다. Piece 클래스는 phina.js에서 처음부터 준비되어 있는 RectangleSha... 튜토리얼phina.js게임 제작자바스크립트HTML5 phina.js로 쉽게 배경 스크롤을 할 수있는 TiledSprite 클래스 만들기 액션 게임·STG 제작시 등 배경을 스크롤하고 싶은 것이 남아 있습니다. 배경 스크롤을 표현하는 방법으로서, 예를 들면 횡방향으로 스크롤하고 싶을 때는 2장의 스프라이트를 이음새 없이 나란히 스크롤 방향으로 이동시켜, 적당한 타이밍(화면 밖에 나온 등)에서 위치를 리셋하는 방법이 일반적 입니다. 단지 코드를 단순화하기가 어렵고 스크롤 방향이 한 방향으로만 제한된다는 단점이 있습니다. 그래서 ... 자바스크립트phina.js게임 제작 태고 3시간에 만든 간단한 게임입니다. 나는 JavaScript의J를 잊어버렸다. 안에 비어 있는 것이 하나 있어서 채워 넣으려고 합니다.그리고 태고라고 해도 1년 전쯤에 지나지 않는다고 말씀드리겠습니다. .github.io 뭔가를 공개하고 싶을 때 편해요. 퀄리티가 3시간인 것 같아~ (울며)색깔은 신경 쓰이지만종횡비는 스마트폰에 적합하다.(아이폰5 같은 거) 전차 안에서 허무주의 상태에 빠졌을 때(즉 한가함) 가끔 해요. 15... JavaScriptphina.js
【phina.js】소를 피할 만한 게임을 만들었습니다(?) github 페이지에 올라 있으므로 부담없이 놀아보세요. 스크린 샷을 보면 바로 알 수 있다고 생각하지만 빌어 먹을 게임입니다. 이번에는 이런 느낌의 빌어 먹을 게임을 만드는 방법을 조금 소개합니다 당 판정 등 힘들 것 같은 일은하고 싶지 않기 때문에 솔직하게 게임 라이브러리를 사용합니다 시간이 많이 걸리지 않고 게임을 만들고 싶다면 "phina.js"를 추천합니다. phina.js는 일본제... phina.js게임 제작자바스크립트게임parcel phina.js에서 웹 글꼴을 사용해보십시오! 모처럼 게임을 만들고 있는데, 브라우저상에서의 게임의 경우 폰트가 환경 의존이 되기 쉽다. 이것은 JavaScript 라이브러리 인 phina.js에서도 동일하다고 생각합니다. 그래서 단말의 폰트 제약에 영향을 받지 않는 목적으로, Web 폰트가 있으므로, 이것을 사용해, phina.js 로의 게임내에서도 제대로 된 게임에 있던 폰트를 사용해-! 라는 것으로, 해 보았습니다. 라고, 와 같은... phina.jsCoffeeScript [phina.js] 이미지의 색상을 변경하는 방법 (마스크) 사용법 AssetManager 에 추가한 다음 사용하거나 직접 텍스처로 사용할 수 있습니다.maskImage(色を変えたい asset, 変更後の色, 新しい asset の名前) 처리 할 이미지와 동일한 크기의 이미지 처리를위한 장면을 만듭니다 장면의 배경색을 변경하려는 색상으로 설정 Sprite에서 장면에 색을 바꾸려는 이미지를 추가합니다 Sprite blendMode 를 destination-... HTML5자바스크립트phina.js캔버스 [phina.js] 요소를 스크롤 할 수있는 액세서리를 만들어 보았습니다. phina.js의 어드벤트 캘린더 2017의 7일째입니다. 6일째의 기사를 읽고, 스스로 제대로 실장해 보고 싶다고 생각해 보았습니다. 클래스 자체는 구현하고 있으면, 상당히 길어져 버렸으므로, 코드는 에 있어 있습니다. phina.js를 로드한 후 이 URL을 로드하여 사용할 수 있습니다. <script src="https://rawgit.com/simiraaaa/8c0d6bf92cc4b0... phina.js캔버스자바스크립트게임HTML5 phina.js의 clip과 blendMode에서 놀았습니다. 우선은 이하의 게임을 해보고 싶습니다. (소리가 나옵니다) 주목해 주었으면 하는 것은 화면 천이할 때등의 원형의 이펙트와, 게임중에 스포트라이트가 맞았듯이 주위가 어두워지는 연출의 부분입니다. 이들은 각각 clip과 blendMode라는 기능을 사용하여 실현됩니다. 환경 phina.js v0.2.2 clip()은 canvasAPI의 clip과 같고, 지정한 패스의 범위내만을 렌더링 하는 메소... 캔버스자바스크립트phina.js 게임 작성 튜토리얼(마인 스위퍼)(최종회)【마크 기능의 추가】 ※지금까지의 튜토리얼은 에 정리하고 있습니다. 에서는 게임 오버와 클리어 처리를 추가했습니다. 이번에는 마지막 시간으로 마크 기능을 추가합니다. 마크 기능은 스스로 폭탄이라고 판단한 패널을 마크하여 열 수 없게 하는 기능입니다. 마크 기능 추가 MainScene의 변경점 this.mode라는 변수로 모드를 관리합니다. 마크 모드이면, 패널이 터치되었을 때에 그 패널이 아직 열려 있지 않고, ... 튜토리얼phina.js게임 제작자바스크립트HTML5 【phina.js】게임 작성 튜토리얼(15퍼즐)(그 3)【피스의 터치】 ※지금까지의 Tips는 에 정리하고 있습니다. ←→ 지난번에는 15퍼즐 조각에 숫자를 표시했습니다. 이번에는 외형의 변화는 없지만, 조각에 터치 이벤트를 추가하여 결과를 알 수 있도록 콘솔에 출력시킵니다. 코드는 다음과 같습니다. 터치 이벤트 추가 조각 작성시의 처리를 다음과 같이 변경합니다. 에서 오브젝트의 터치를 유효하게 하려면 , obj.setInteractive(true) 로 설정합니... 튜토리얼phina.js게임 제작자바스크립트HTML5 【phina.js】게임 작성 튜토리얼(15퍼즐)(그 2)【숫자의 표시】 ※지금까지의 Tips는 에 정리하고 있습니다. ←→ 마지막에는 15 퍼즐 조각을 배치했습니다. 이번에는 다음과 같이 15 퍼즐 조각에 숫자를 표시합니다. 코드는 다음과 같습니다. 숫자 표시 숫자를 표시하려면 Label 클래스를 사용합니다. 이를 위해 Piece 클래스를 다음과 같이 변경합니다. init 함수에 num이라는 인수를 만들고 초기화 시 숫자를 제공합니다. this.num에 주어진 ... 튜토리얼phina.js게임 제작자바스크립트HTML5 【phina.js】게임 작성 튜토리얼(15퍼즐)(그 1)【피스의 배치】 ※지금까지의 튜토리얼은 에 정리하고 있습니다. 이 튜토리얼에서는 유명한 슬라이드 퍼즐인 15퍼즐을 phina.js로 만들고 싶습니다. 다음과 같이 15퍼즐 조각을 배치합니다. 코드는 다음과 같습니다. 상수 정의 조각 클래스 정의 나중의 편의성을 생각하고 phina.define에서 다음과 같이 클래스화합니다. Piece 클래스는 phina.js에서 처음부터 준비되어 있는 RectangleSha... 튜토리얼phina.js게임 제작자바스크립트HTML5 phina.js로 쉽게 배경 스크롤을 할 수있는 TiledSprite 클래스 만들기 액션 게임·STG 제작시 등 배경을 스크롤하고 싶은 것이 남아 있습니다. 배경 스크롤을 표현하는 방법으로서, 예를 들면 횡방향으로 스크롤하고 싶을 때는 2장의 스프라이트를 이음새 없이 나란히 스크롤 방향으로 이동시켜, 적당한 타이밍(화면 밖에 나온 등)에서 위치를 리셋하는 방법이 일반적 입니다. 단지 코드를 단순화하기가 어렵고 스크롤 방향이 한 방향으로만 제한된다는 단점이 있습니다. 그래서 ... 자바스크립트phina.js게임 제작 태고 3시간에 만든 간단한 게임입니다. 나는 JavaScript의J를 잊어버렸다. 안에 비어 있는 것이 하나 있어서 채워 넣으려고 합니다.그리고 태고라고 해도 1년 전쯤에 지나지 않는다고 말씀드리겠습니다. .github.io 뭔가를 공개하고 싶을 때 편해요. 퀄리티가 3시간인 것 같아~ (울며)색깔은 신경 쓰이지만종횡비는 스마트폰에 적합하다.(아이폰5 같은 거) 전차 안에서 허무주의 상태에 빠졌을 때(즉 한가함) 가끔 해요. 15... JavaScriptphina.js