Grimoire.js 플러그인 만들기
10432 단어 Grimoire.jsJavaScript
원래 플러그인이 뭐예요?
한마디로 npm의 포장일 뿐입니다.
npm에 있는 다른 Grimoire.js 플러그인이나 구축 html 을 사용하여 스크립트 탭으로 불러올 수 있습니다.
Grimoire.js의 기능은 GOML 태그로 구성되어 있기 때문에 플러그인 개발은 주로 새로운 탭을 추가하는 작업입니다.
필요 환경
Typescript
추천쓰세요.
Node.js
npm이니까.
로컬 웹 서버
지을 수 있으면 디버깅으로 편리하다.그렇지 않으면 디버깅을 할 수 없습니다
프로젝트 작성
Grimoire.js 플러그인, 한 번규격. 이런 거 때문에 0부터 만들 수 있지만 매워서 grimoirejs-cauldron 이렇게 편리한 도구를 사용합니다.
grimoirejs-cauldron
패키지 생성, 구성 요소 파일 생성, 구축 환경 등이 모두 포함되어 있다.
정식 포장에도 모두 이걸 사용했어요.
설치하다.
$ npm install -g grimoirejs-cauldron
패키지 템플릿 작성
빈 폴더$ cauldron init -n <パッケージ名>
내가 한 것은 단지 ts-boilerplate를 복제해서 이름을 다시 쓰는 것뿐이다.
직접 복제ts-boilerplate도 가능합니다.
프로젝트 구축
클론만으로는 종속성을 설치할 수 없습니다.$ npm install
넣다
구축$ npm run build
네.그러나 기본적으로 노드 환경을 위한 구축이기 때문에 "}"로 스크립트 탭을 읽을 때$ npm run build -- --env.browser
.겸사겸사 말씀드리겠습니다.$ npm run start -- --env.browser
워치 가능합니다.(파일 수정 사항을 모니터링하고 자동으로 구성합니다.)
항목을 사용합니다.
구축 후 register 폴더에는 <パッケージ名>.js 및 index.js가 있습니다.index.js 노드 환경을 대상으로 한다.html 사용하기 시작합니다<パッケージ名>.js.<html>
<head>
<script src="https://unpkg.com/grimoirejs-preset-basic/register/grimoire-preset-basic.min.js" charset="utf-8"></script>
<script src="/path/to/proj/register/<パッケージ名>.js" charset="utf-8"></script>
</head>
브라우저에서 열면 콘솔에 표시됩니다.
이런 느낌으로 표현한다.Plugins: 마지막으로 자신의 포장을 표시하면 성공!
플러그인 설치
구성 요소 컨텐트 만들기
먼저 템플릿 생성
파일 템플릿
$ cauldron scaffold -n <コンポーネント名> -t component
$ cauldron scaffold -n <コンバータ名> -t converter
예를 들어 cauldron scaffold -n Rotate -t component로 Rotate 부품을 만들어 보았다.src/Components에서 만들어야 한다RotateComponent.ts.
RotateComponent.tsimport Component from "grimoirejs/ref/Node/Component";
import IAttributeDeclaration from "grimoirejs/ref/Node/IAttributeDeclaration";
export default class RotateComponent extends Component {
public static componentName:string = "Rotate";
public static attributes: { [key: string]: IAttributeDeclaration } = {
// Specify the attributes user can intaract
};
}
이렇게 만들어진 거야.우선 노드 회전 기능을 설치해 보자.
RotateComponent.ts(〜略)
public static attributes: { [key: string]: IAttributeDeclaration } = {
// Specify the attributes user can intaract
speed:{
converter:"Number",
default: 0.2
}
};
private _r=0;
public $update(){
this._r+=this.getAttribute("speed");
this.node.setAttribute("rotation",[0,this._r,0]);
}
(略〜)
speed제작 속성, _r에 추가하여 노드의rotation속성으로 설정합니다.
속성$update은 도대체 무엇입니까?이런 사람들은 정부 지침서에 대해 비교적 익숙하다.
단지 이것만, 아직 제작된 것이기 때문에 main.ts에 실체 등록에 기재하는 처리가 필요하다.
main.tsimport gr from "grimoirejs";
import Rotate from "./Components/RotateComponent";
export default ()=>{
gr.register(async ()=>{
gr.registerComponent(Rotate);
});
};
워낙 템플릿이 있어 한 줄gr.registerComponent(Rotate);만 추가된다.
추기
이전 릴리즈에서
main.ts gr.registerComponent("Rotate",Rotate);
최근 버전에 등록된 객체componentName의 수정 사항입니다.낡은 문법도 사용할 수 있지만 추천하지 않습니다.
플러그인 사용
구성 요소를 만들었기 때문에 GOML로 그걸 사용해 봤어요.
index.goml<goml>
<scene>
<camera/>
<mesh>
<mesh.components>
<Rotate/>
</mesh.components>
</mesh>
</scene>
</goml>
완성!
추가: 일반적인 오류
Typescript
추천쓰세요.
Node.js
npm이니까.
로컬 웹 서버
지을 수 있으면 디버깅으로 편리하다.그렇지 않으면 디버깅을 할 수 없습니다
프로젝트 작성
Grimoire.js 플러그인, 한 번규격. 이런 거 때문에 0부터 만들 수 있지만 매워서 grimoirejs-cauldron 이렇게 편리한 도구를 사용합니다.
grimoirejs-cauldron
패키지 생성, 구성 요소 파일 생성, 구축 환경 등이 모두 포함되어 있다.
정식 포장에도 모두 이걸 사용했어요.
설치하다.
$ npm install -g grimoirejs-cauldron
패키지 템플릿 작성
빈 폴더$ cauldron init -n <パッケージ名>
내가 한 것은 단지 ts-boilerplate를 복제해서 이름을 다시 쓰는 것뿐이다.
직접 복제ts-boilerplate도 가능합니다.
프로젝트 구축
클론만으로는 종속성을 설치할 수 없습니다.$ npm install
넣다
구축$ npm run build
네.그러나 기본적으로 노드 환경을 위한 구축이기 때문에 "}"로 스크립트 탭을 읽을 때$ npm run build -- --env.browser
.겸사겸사 말씀드리겠습니다.$ npm run start -- --env.browser
워치 가능합니다.(파일 수정 사항을 모니터링하고 자동으로 구성합니다.)
항목을 사용합니다.
구축 후 register 폴더에는 <パッケージ名>.js 및 index.js가 있습니다.index.js 노드 환경을 대상으로 한다.html 사용하기 시작합니다<パッケージ名>.js.<html>
<head>
<script src="https://unpkg.com/grimoirejs-preset-basic/register/grimoire-preset-basic.min.js" charset="utf-8"></script>
<script src="/path/to/proj/register/<パッケージ名>.js" charset="utf-8"></script>
</head>
브라우저에서 열면 콘솔에 표시됩니다.
이런 느낌으로 표현한다.Plugins: 마지막으로 자신의 포장을 표시하면 성공!
플러그인 설치
구성 요소 컨텐트 만들기
먼저 템플릿 생성
파일 템플릿
$ cauldron scaffold -n <コンポーネント名> -t component
$ cauldron scaffold -n <コンバータ名> -t converter
예를 들어 cauldron scaffold -n Rotate -t component로 Rotate 부품을 만들어 보았다.src/Components에서 만들어야 한다RotateComponent.ts.
RotateComponent.tsimport Component from "grimoirejs/ref/Node/Component";
import IAttributeDeclaration from "grimoirejs/ref/Node/IAttributeDeclaration";
export default class RotateComponent extends Component {
public static componentName:string = "Rotate";
public static attributes: { [key: string]: IAttributeDeclaration } = {
// Specify the attributes user can intaract
};
}
이렇게 만들어진 거야.우선 노드 회전 기능을 설치해 보자.
RotateComponent.ts(〜略)
public static attributes: { [key: string]: IAttributeDeclaration } = {
// Specify the attributes user can intaract
speed:{
converter:"Number",
default: 0.2
}
};
private _r=0;
public $update(){
this._r+=this.getAttribute("speed");
this.node.setAttribute("rotation",[0,this._r,0]);
}
(略〜)
speed제작 속성, _r에 추가하여 노드의rotation속성으로 설정합니다.
속성$update은 도대체 무엇입니까?이런 사람들은 정부 지침서에 대해 비교적 익숙하다.
단지 이것만, 아직 제작된 것이기 때문에 main.ts에 실체 등록에 기재하는 처리가 필요하다.
main.tsimport gr from "grimoirejs";
import Rotate from "./Components/RotateComponent";
export default ()=>{
gr.register(async ()=>{
gr.registerComponent(Rotate);
});
};
워낙 템플릿이 있어 한 줄gr.registerComponent(Rotate);만 추가된다.
추기
이전 릴리즈에서
main.ts gr.registerComponent("Rotate",Rotate);
최근 버전에 등록된 객체componentName의 수정 사항입니다.낡은 문법도 사용할 수 있지만 추천하지 않습니다.
플러그인 사용
구성 요소를 만들었기 때문에 GOML로 그걸 사용해 봤어요.
index.goml<goml>
<scene>
<camera/>
<mesh>
<mesh.components>
<Rotate/>
</mesh.components>
</mesh>
</scene>
</goml>
완성!
추가: 일반적인 오류
$ npm install -g grimoirejs-cauldron
$ cauldron init -n <パッケージ名>
클론만으로는 종속성을 설치할 수 없습니다.
$ npm install
구축
$ npm run build
$ npm run build -- --env.browser
$ npm run start -- --env.browser
항목을 사용합니다.
구축 후 register 폴더에는 <パッケージ名>.js 및 index.js가 있습니다.index.js 노드 환경을 대상으로 한다.html 사용하기 시작합니다<パッケージ名>.js.<html>
<head>
<script src="https://unpkg.com/grimoirejs-preset-basic/register/grimoire-preset-basic.min.js" charset="utf-8"></script>
<script src="/path/to/proj/register/<パッケージ名>.js" charset="utf-8"></script>
</head>
브라우저에서 열면 콘솔에 표시됩니다.
이런 느낌으로 표현한다.Plugins: 마지막으로 자신의 포장을 표시하면 성공!
플러그인 설치
구성 요소 컨텐트 만들기
먼저 템플릿 생성
파일 템플릿
$ cauldron scaffold -n <コンポーネント名> -t component
$ cauldron scaffold -n <コンバータ名> -t converter
예를 들어 cauldron scaffold -n Rotate -t component로 Rotate 부품을 만들어 보았다.src/Components에서 만들어야 한다RotateComponent.ts.
RotateComponent.tsimport Component from "grimoirejs/ref/Node/Component";
import IAttributeDeclaration from "grimoirejs/ref/Node/IAttributeDeclaration";
export default class RotateComponent extends Component {
public static componentName:string = "Rotate";
public static attributes: { [key: string]: IAttributeDeclaration } = {
// Specify the attributes user can intaract
};
}
이렇게 만들어진 거야.우선 노드 회전 기능을 설치해 보자.
RotateComponent.ts(〜略)
public static attributes: { [key: string]: IAttributeDeclaration } = {
// Specify the attributes user can intaract
speed:{
converter:"Number",
default: 0.2
}
};
private _r=0;
public $update(){
this._r+=this.getAttribute("speed");
this.node.setAttribute("rotation",[0,this._r,0]);
}
(略〜)
speed제작 속성, _r에 추가하여 노드의rotation속성으로 설정합니다.
속성$update은 도대체 무엇입니까?이런 사람들은 정부 지침서에 대해 비교적 익숙하다.
단지 이것만, 아직 제작된 것이기 때문에 main.ts에 실체 등록에 기재하는 처리가 필요하다.
main.tsimport gr from "grimoirejs";
import Rotate from "./Components/RotateComponent";
export default ()=>{
gr.register(async ()=>{
gr.registerComponent(Rotate);
});
};
워낙 템플릿이 있어 한 줄gr.registerComponent(Rotate);만 추가된다.
추기
이전 릴리즈에서
main.ts gr.registerComponent("Rotate",Rotate);
최근 버전에 등록된 객체componentName의 수정 사항입니다.낡은 문법도 사용할 수 있지만 추천하지 않습니다.
플러그인 사용
구성 요소를 만들었기 때문에 GOML로 그걸 사용해 봤어요.
index.goml<goml>
<scene>
<camera/>
<mesh>
<mesh.components>
<Rotate/>
</mesh.components>
</mesh>
</scene>
</goml>
완성!
추가: 일반적인 오류
<html>
<head>
<script src="https://unpkg.com/grimoirejs-preset-basic/register/grimoire-preset-basic.min.js" charset="utf-8"></script>
<script src="/path/to/proj/register/<パッケージ名>.js" charset="utf-8"></script>
</head>
구성 요소 컨텐트 만들기
먼저 템플릿 생성
파일 템플릿
$ cauldron scaffold -n <コンポーネント名> -t component
$ cauldron scaffold -n <コンバータ名> -t converter
cauldron scaffold -n Rotate -t component로 Rotate 부품을 만들어 보았다.src/Components에서 만들어야 한다RotateComponent.ts.RotateComponent.ts
import Component from "grimoirejs/ref/Node/Component";
import IAttributeDeclaration from "grimoirejs/ref/Node/IAttributeDeclaration";
export default class RotateComponent extends Component {
public static componentName:string = "Rotate";
public static attributes: { [key: string]: IAttributeDeclaration } = {
// Specify the attributes user can intaract
};
}
RotateComponent.ts
(〜略)
public static attributes: { [key: string]: IAttributeDeclaration } = {
// Specify the attributes user can intaract
speed:{
converter:"Number",
default: 0.2
}
};
private _r=0;
public $update(){
this._r+=this.getAttribute("speed");
this.node.setAttribute("rotation",[0,this._r,0]);
}
(略〜)
speed제작 속성, _r에 추가하여 노드의rotation속성으로 설정합니다.속성
$update은 도대체 무엇입니까?이런 사람들은 정부 지침서에 대해 비교적 익숙하다.단지 이것만, 아직 제작된 것이기 때문에
main.ts에 실체 등록에 기재하는 처리가 필요하다.main.ts
import gr from "grimoirejs";
import Rotate from "./Components/RotateComponent";
export default ()=>{
gr.register(async ()=>{
gr.registerComponent(Rotate);
});
};
gr.registerComponent(Rotate);만 추가된다.추기
이전 릴리즈에서
main.ts
gr.registerComponent("Rotate",Rotate);
componentName의 수정 사항입니다.낡은 문법도 사용할 수 있지만 추천하지 않습니다.플러그인 사용
구성 요소를 만들었기 때문에 GOML로 그걸 사용해 봤어요.
index.goml<goml>
<scene>
<camera/>
<mesh>
<mesh.components>
<Rotate/>
</mesh.components>
</mesh>
</scene>
</goml>
완성!
추가: 일반적인 오류
<goml>
<scene>
<camera/>
<mesh>
<mesh.components>
<Rotate/>
</mesh.components>
</mesh>
</scene>
</goml>
main.ts에서 등록 처리가 없음setAttribute 속성의 맞춤법 오류가 발생했습니다.Reference
이 문제에 관하여(Grimoire.js 플러그인 만들기), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/moajo/items/ca1b1de7bffbe3b591c7텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
