Stage.js 소개

stage.js는 크로스 플랫폼 2D HTML5 게임 개발을위한 가벼운 오픈 소스 JavaScript 라이브러리입니다. DOM과 같은 모델을 사용하여 캔버스를 조작하고 응용 프로그램 자체의 렌더링 사이클을 관리합니다. 이 튜토리얼은 Stage.js의 핵심 기능을 소개하여 쉽게 시작할 수 있도록 도와줍니다.

키 포인트

stage.js는 Cross-Platform 2D HTML5 게임 개발을위한 가볍고 오픈 소스 JavaScript 라이브러리로, DOM-like 모델을 사용하여 캔버스를 처리하고 응용 프로그램의 렌더링주기를 독립적으로 관리합니다. 라이브러리는 노드 포지셔닝 (노드가 부모 노드에 연결하는 방법 결정), 인터랙티브 업데이트를위한 마우스 및 터치 이벤트, 원활한 전환을위한 트윈 애니메이션, 그래픽 디스플레이 및 애니메이션 텍스처 컬렉션을위한 그래픽 디스플레이 및 애니메이션을 포함한 여러 기능을 제공합니다. stage.js는 사용하기 쉽고 직관적이며 복잡한 코딩이나 웹 그래픽에 대한 광범위한 지식없이 대화식 웹 응용 프로그램 또는 게임을 만들고자하는 개발자에게 적합합니다. NPM (Node Package Manager)을 사용하여 설치할 수 있으며 반응 형 디자인 덕분에 데스크탑 및 모바일 플랫폼과 호환됩니다.

• 설치 및 사용
먼저 Stage.js 라이브러리를 다운로드하십시오. GitHub 저장소에서 최신 버전을 얻을 수 있습니다 (일부 초보자 예제). 원하는 경우 CDN에서 직접로드 할 수도 있습니다. 핵심 파일을 포함한 후에는 자신의 JavaScript 파일을 추가해야하지만 라이브러리 앞에 응용 프로그램 파일을 포함시키지 않도록주의하십시오.
스테이지에서 응용 프로그램 생성은 콜백 함수를 로 전달하여 달성됩니다. 라이브러리는 필요한 모든 구성 요소를로드합니다. 마지막으로 콜백 함수를 호출하고 모든 것을 화면으로 렌더링합니다. 당신이 만든 각 응용 프로그램에는 나무가 있고 무대는 그 나무의 근본에 있습니다. 이미지 나 문자열과 같은 다른 모든 요소가 노드가됩니다. 각 렌더링 사이클 동안 노드가 업데이트되면 응용 프로그램 트리가 다시 그려집니다.
• 노드 위치 (고정)
노드 포지셔닝은 노드가 부모 노드에 어떻게 부착되는지를 결정합니다. 노드 포지셔닝을 사용하여 설정할 수있는 많은 옵션이 있습니다. 그들 중 일부는 크기, 위치, 정렬 및 변형입니다. 다음은 간단한 예와 설명입니다.

먼저 뷰포트 크기를 지정합니다. 우리는 "휠"으로 참조 된 이미지 휠을 첨부합니다. 그런 다음 "핸들"을 사용 하여이 이미지 또는 노드의 초기 위치를 설정합니다. 모든 노드의 "핸들"은 부모 노드의 정렬 지점에 의해 지정된 오프셋에 배치됩니다. "핸들"과 "정렬"은 모두 상대 단위로 지정됩니다. 예를 들어, 0은 왼쪽 상단 코너이고 1은 오른쪽 하단 모서리입니다. 위의 코드는 휠을 뷰포트 중앙에 위치시킵니다. 중앙에서 특정 수평 거리에 이미지를 배치하려면 아래와 같이 "offsetx"를 사용할 수 있습니다.

<🎜>
<🎜>

위의 거리는 300 픽셀이 아니라 뷰포트 크기의 3/14 배입니다. 스케일링, 틸팅 및 회전과 같은 노드의 다른 값을 설정할 수도 있습니다. 특정 방향 (예 : 수평)로 확장하려면 scalex를 사용할 수 있습니다. 다음 코드 스 니펫은 휠을 1.4 배로 늘립니다.

회전, 줌 및 틸트는 기본적으로 회전 지점으로 노드의 중심이됩니다. 다음 방법을 사용하여 노드에 대해 다른 회전 지점을 설정할 수도 있습니다.

Stage(function (stage) {
    stage.viewbox(700, 700);
    Stage.image('wheel')
        .appendTo(stage)
        .pin('handle', 0.5);
});

Stage({
    name: 'wheel',
    image: 'wheel.png'
});

대체로 고정 요소를 사용하면 이동하고 스케일을 또는 회전 할 수 있습니다.

마우스 및 터치 이벤트

사용자 상호 작용에서 노드를 업데이트하려면 다양한 마우스 및 터치 이벤트를 사용할 수 있습니다. 위의 휠 예제를 계속하면 다음 코드를 작성할 수 있습니다.

Stage.image('wheel')
    .appendTo(stage)
    .pin({
        handle: 0.5,
        offsetX: 300
    });

또는

와 같은 이러한 이벤트를 정의 할 수 있습니다. 업데이트 된 코드는 다음과 같습니다

또 다른 예제는 입니다.

트윈 애니메이션 (Tweening)

트윈 애니메이션은 노드 포지셔닝 값에 부드러운 전환을 적용합니다. 이것은 관련 노드의 위치 또는 크기의 갑작스런 변화를 방지합니다. 예를 들어, 아래 코드는 PI 라디안에서 휠을 갑자기 회전시키고 클릭 할 때마다 위치를 600으로 변경합니다.

Stage.image('wheel')
    .appendTo(stage)
    .pin({
        handle: 0.5,
        scaleX: 1.4
    });

그러나 트윈 방법을 추가하면 전환이 부드럽습니다.

Stage.Mouse.CLICK = 'click'; 완화 방법, 지속 시간 및 지연과 같은 여러 옵션을 사용할 수 있습니다. 위의 코드에서는 기간을 3000 밀리 초로 설정하고 완화 함수를 바운스로 설정했습니다. 또한 선형, 쿼드, 입방 및 쿼트와 같은 다양한 완화 함수를 사용할 수 있습니다. 지연을 설정하면 지정된 지연 후 전환이 시작됩니다. 애니메이션이 완료된 후 노드가 필요하지 않은 경우 호출하여 노드를 삭제할 수 있습니다. 다른 작업을 수행하려면 트윈 애니메이션이 완료된 후 다음 코드 스 니펫을 사용하여 콜백 기능을 실행할 수 있습니다.

node.pin({
    pivotX: x,
    pivotY: y
});

텍스처 아틀라스

텍스처는 트리 노드에서 캔버스에 그래픽을 그리는 데 사용됩니다. 캔버스에 그래픽을 표시하려면 "텍스처 갤러리"라고도하는 스프라이트 테이블을 사용할 수 있습니다. 텍스처 아틀라스의 이름을 설정하는 것은 선택 사항입니다. 스프라이트 테이블에는 이름이 지정된 텍스처 세트가 있어야합니다. 응용 프로그램에서 사용하기 위해 이름으로 참조 할 수 있습니다. 텍스처 어레이를 프레임으로 사용하여 애니메이션을 만들 수 있습니다. 애니메이션 자체는 노드입니다. 다음은 애니메이션 전사의 예입니다 Stage.Mouse.MOVE = 'touchmove mousemove'; 전사를 애니메이션하려면 다음 코드가 필요합니다. 더 빨리 만들기 위해 FPS를 증가시킬 수 있습니다

와 같은 다른 방법이 있습니다. n 의 값에 따라

를 사용하여 n 프레임을 앞뒤로 움직일 수도 있습니다. 요약

이 입문 자습서에서는 Stage.js로 시작하는 데 필요한 모든 것을 다룹니다. 논의 된 개념은 기본 문자 애니메이션을 만들고 스프라이트를 사용하여 사용자와 상호 작용하는 데 도움이됩니다. 공식 웹 사이트 에서이 라이브러리에 대해 자세히 알아볼 수 있습니다. 또한 GitHub 페이지에서 파일을 다운로드하는 것이 좋습니다. 다운로드 파일에 포함 된 데모는 문제를 더 명확하게 설명합니다.

(FAQ 섹션은 여기에 추가되어야합니다. 내용은 입력 텍스트의 FAQ 섹션과 동일하지만 필요에 따라 약간 다시 작성하고 조정할 수 있습니다)

.

위 내용은 Stage.js 소개의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!