HTML5 Dream Journey - 눈부신 유성우 효과 구현 과정_html5 튜토리얼 기술

Xu 가족의 깨진 거울은 안개처럼 흐릿합니다. 얼굴의 절반이 노출됩니다. 우리는 조명을 보기 위해 우연히 만난다. 의외로 지구상의 하늘은 유성과 같습니다. 빨간 문 커튼의 그림자가 빗속에 깊숙이 스며듭니다. 초췌한 신인이 춤을 춘다. 전 세계의 새로운 햇살을 즐겨보세요. 다리 옆에서 거울만 파는 것은 여유로운 활동이다.
——송나라 유진옹·"양귀비"

유성에게 소원을 빌면 소원이 이루어진다고 해서 사람들은 별똥별이 나타나면 소원을 빌기를 좋아한다. 실현되다. 하지만 별똥별은 드물고, 적어도 나는 본 적이 없기 때문에, 별똥별에 대해 소원을 빌어본 적이 없습니다. 최근에는 관심을 끌기 위해 후행 효과를 만들었는데, 후행 효과를 활용하면 유성우 효과를 얻을 수 있겠다는 생각이 들었습니다. 그러니 오늘은 저처럼 별똥별을 본 적 없는 아이들이 깨달음을 얻을 수 있도록 해보겠습니다.

먼저 스크린샷 몇 장을 게시하겠습니다.


연결 테스트: http://www.cnblogs.com/yorhom/articles/3237944.html
1. 준비
이 개발에는 오픈소스 엔진인 lufylegend.js가 필요합니다. 엔진의 다운로드 주소와 세부사항은 다음과 같습니다
엔진 공식 홈페이지:
http ://lufylegend.com/lufylegend
엔진 API 웹사이트:
http://lufylegend.com/lufylegend/api
2. 유성우 구현 , trailing effect 를 사용해야 하는데 lufylegend에는 tailing 기능이 없어서 직접 작성해야 했습니다. 사실 구현하기 어렵지는 않지만 lufy가 너무 게으르고 캡슐화도 없습니다. 이 문장은 보지 마세요...). 오늘 나는 그가 이 효과를 얻을 수 있도록 도와줄 것입니다. 캐릭터가 움직일 때 팬텀이나 총알이 나오는 등 게임에서 테일링 효과가 매우 흔히 나타납니다. 따라서 우리는 이를 후행 효과 달성을 주로 담당하는 Smearing 클래스로 캡슐화합니다. 코드는 다음과 같습니다.

코드를 복사하세요. 코드는 다음과 같습니다.

/**

* 번짐
* @param $object 후행 객체 추가
*/
function Smearing($object){
var self = this
base(self,LSprite,[])
self.x = 0; 🎜>self.y = 0 ;
self.mode = "";
self.smearingSprite = new LSprite()
self.addChild(self.smearingSprite); object;
self.originalSprite();
self.addChild(self.originalSprite)
self.addEventListener(LEvent.ENTER_FRAME) ,self.smeared);
}


코드 목록 1
한 단어씩 설명하겠습니다.
코드의 첫 번째 줄은 설명하지 않겠습니다. 지구상의 IT 담당자라면 누구나 알고 있을 것입니다. 그럼 두 번째 줄부터 시작해 보세요.
먼저 코드 목록 2에 표시된 것처럼 base를 사용하여 LSprite에서 이 클래스를 상속합니다(base와 LSprite가 무엇인지는 API 문서에서 확인하거나 이전 기사를 읽을 수 있습니다).

코드 복사

코드는 다음과 같습니다. base(self,LSprite, []) ;

코드 목록 2

다음으로 레이어를 추가하여 트레일을 추가합니다. 예를 들어 코드 목록 3

코드 복사

코드는 다음과 같습니다. self.smearingSprite = new LSprite(); self.addChild(self.smearingSprite);

코드 목록 3
그런 다음 객체를 후행 효과와 함께 저장합니다. 나중에 사용할 수 있습니다. 코드목록4와 같이

코드를 복사하세요

코드는 다음과 같습니다.self.object = $object;

코드 목록 4

그런 다음 후행 효과 개체를 추가하려는 레이어를 추가하고 표시합니다. 예를 들어 코드 목록 5

코드 복사

코드는 다음과 같습니다. self.originalSprite = new LSprite(); self.addChild(self.originalSprite);

self.originalSprite.addChild(self.object)

코드 목록 5
마지막으로 꼬리 추가에 편리한 타임라인 이벤트를 추가합니다.

코드 복사

코드는 다음과 같습니다. self.addEventListener(LEvent. ENTER_FRAME,자체 번짐)

코드 목록 6
이제 Smearing 생성자를 작성하고 설명했습니다. 이해가 안 되신다면 lufylegend 내부의 addChild와 LSprite가 모두 lufylegend에 캡슐화되어 있다는 뜻일 것입니다.
위 코드에 타임라인 이벤트를 추가했습니다. 왜 가입하나요? 왜냐면 꼬리끌기의 원리에 대해서 이야기하는 편이 나을 것 같거든요. 트레일링은 실제로 원래 개체를 지속적으로 복제한 다음 현재 위치에 배치하는 것으로, 이는 화면에 지속적으로 스탬프를 찍는 것과 같습니다. 원본 개체가 멀어지면 복제한 개체는 멀어지지 않지만 원본 개체는 멀어집니다. 여러 개체를 추가하면 원본 개체를 연결하는 선이 형성됩니다. 이때 이 줄의 각 구성원을 순회하고 완화를 통해 현재 개체의 투명도를 변경합니다. 그런 다음 개체의 투명도가 0인지 확인하고, 그렇다면 너무 많은 공간을 차지하지 않도록 제거하십시오. 따라서 우리는 후행 객체를 지속적으로 추가하기 위해 타임라인 이벤트를 추가합니다.
Smearing 멤버 함수 smeared가 이 역할을 하며 코드는 다음과 같습니다.

코드 복사

코드는 다음과 같습니다. 다음은 다음과 같습니다.

Smearing.prototype.smeared = function(self){
var smearingChild = new SmearingChild(self.originalSprite,self.object)
self.smearingSprite.addChild(smearingChild) );
for(self.smearingSprite.childList의 var 키){
LTweenLite.to(self.smearingSprite.childList[key],0.5,{
alpha: 0,
onComplete:function( o){
self.smearingSprite.removeChild(o);
}
})
}
}

코드 목록 7
코드는 다음과 같습니다. 위에서 언급한 원칙이 구현됩니다. 마지막에 후행 레이어의 멤버를 순회한 다음 순회된 객체의 투명도를 변경하고 여유가 끝난 후 자체적으로 제거되는 것을 볼 수 있습니다. easing 클래스는 lufylegend에 캡슐화된 LTweenLite를 사용합니다. 매우 자세한 내용은 API 문서에서 확인할 수 있습니다.
주로 코드 목록 8과 같은 위의 두 줄의 코드:

코드 복사

코드는 다음과 같습니다.

var smearingChild = new SmearingChild(self.originalSprite,self.object);
self.smearingSprite.addChild(smearingChild)

코드 목록 8
SmearingChild라는 또 다른 클래스가 사용되는 것을 볼 수 있습니다. 이것은 전설적인 tailing 클래스입니다. 이 클래스는 코드가 작지만 매우 중요합니다. 코드 목록 9에 표시된 것과 같습니다.

코드 복사

코드는 다음과 같습니다.

/**
* SmearingChild
* @param $parent 후행 위치를 결정하는 객체
* @param $object 후행 효과를 추가할 객체
*/
function SmearingChild($parent,$object){
var self = this ;
base(self,LSprite ,[]);
self.addChild($object)
self.x = $parent.x
self.y; 🎜>self.alpha = 0.8;
}

코드 목록 9
위 클래스는 인스턴스화될 때 두 개의 매개변수를 가지며, 두 번째 매개변수는 후행 위치를 결정하는 데 사용됩니다. 하나는 원래 개체입니다. 먼저 "후행 위치를 결정하는 데 사용됨"이 무엇을 의미하는지 설명하겠습니다. 실제로 객체의 이동은 Smearing 객체 전체를 이동하는 것이 아니라 그 내부의 원래 Sprite 객체를 이동하는 것이므로 smearingSprite 작업을 수행하지 않습니다. .이 디자인은 왜요? 사실 이유가 있습니다(말도 안되는 소리니 무시하세요). 그 이유는 꼬리의 좌표가 전체 Smearing 객체의 좌표 위치로 설정되면 smearingSprite에 추가된 객체도 그에 따라 움직이기 때문입니다. 꼬리가 잘못 정렬되어 효과가 없습니다. 그래서 저는 위의 접근 방식을 취했습니다. 즉, 자체를 이동하는 것이 아니라 원본 Sprite를 이동하는 것입니다. 따라서 원본 Sprite 데이터를 SmearingChild에 전달해야 하므로 $parent를 통해 가져옵니다.
이야기를 하고 나면 다들 조금씩 이해가 되실 텐데요. 코드는 나중에 공개될 예정이며, 코드를 받아 공부하거나, 기사 아래에 질문을 하거나, Sina Weibo @Yorhom을 사용하거나, 이메일 주소: wangyuehao1999@gmail.com을 사용할 수 있습니다. (연락처가 많습니다(^o^))
Smearing 클래스에는 개체를 천천히 움직이게 하는 기능이 아직 부족합니다. 구현하는 것도 매우 간단합니다.

코드 복사코드는 다음과 같습니다.

Smearing.prototype.to = function($duration, $vars){
var self = this;
$vars.onComplete = function(){
self.mode = "complete"
}
LTweenLite.to(self.originalSprite, $기간,$vars)


코드 목록 10
첫 번째 매개변수는 이동 실행 시간, 두 번째 매개변수는 완화 실행 데이터로 LTweenLite.to 메소드의 마지막 매개변수와 동일합니다. API 문서를 참조하세요. 그러나 작업의 편의를 위해 이동이 끝나면 개체의 모드 속성을 "완료"로 변경한다는 점은 주목할 가치가 있습니다. 이는 모든 사람이 객체 제거 또는 다른 곳으로 이동과 같은 모드 속성의 값을 기반으로 다른 작업을 수행할지 여부를 결정할 수 있도록 수행됩니다.
Smearing 클래스는 다음과 같이 캡슐화되어 사용하기 쉽습니다.

코드 복사

코드는 다음과 같습니다. 다음과 같습니다:

init(10,"mylegend",500,400,main)
var back
function main(){
LStage.setDebug(true); 🎜>back = new LSprite();
back.graphics.drawRect(0,"",[0,0,50,50],true,"blue")
smearing = new Smearing(back, 50);
smearing.to(2,{
x: 200,
y: 200
})
addChild(smearing)


코드 목록 11

데모 렌더링은 다음과 같습니다.


테스트 연결: http://www.cnblogs.com/yorhom/articles/3237266.html
셋, 눈부신 유성우 효과
Smearing 클래스를 이용하면 유성우가 훨씬 간편해집니다. 먼저 모든 코드를 보여주세요:

코드 복사코드는 다음과 같습니다.

init( 10,"mylegend",500,400,main);

var backLayer,meteorLayer;
var back,meteor;
var maxFrame = 40,indexFrame = 0; {
LStage.setDebug(true);
//기본 레이어 추가
backLayer = new LSprite();
addChild(backLayer)
//유성 레이어 추가
meteorLayer = new LSprite() ;
addChild(meteorLayer);
//배경으로 검은색 직사각형 그리기
back = new LGraphics()
back.drawRect(0,"",[0, 0,LStage.width ,LStage.height],true,"black");
backLayer.addChild(back);
//유성으로 노란색 직사각형 그리기
meteor = new LSprite();
meteor .graphics.drawRect(0,"",[0,0,10,10],true,"yellow")
backLayer.addEventListener(LEvent.ENTER_FRAME,onframe)
}
function onframe (){
if(indexFrame > maxFrame){
indexFrame = 0
//각 유성에 꼬리 추가
var smearing = new Smearing(meteor,50);
smearing.x = Math.floor(Math.random() * 250);
smearing.y = 0;
smearing.to(2,{
x: Math.floor(Math. 무작위( ) * (500 - 480) 480),
y: 400
})
meteorLayer.addChild(smearing)
}
for(meteorLayer.childList의 var 키) {
if(meteorLayer.childList[key].mode == "complete"){
meteorLayer.removeChild(meteorLayer.childList[key])
}
}
indexFrame; 🎜> }


코드 목록 12
코드의 각 줄마다 주석이 추가되므로 매우 이해하기 쉬워야 합니다. 정말 이해할 수 없다면 루피전설을 이해하지 못해서일 수도 있습니다. 자세한 내용은 API 설명서를 참조하세요.
마지막 단계는 코드 패키징,

주소 다운로드

이 글은 여기서 끝납니다. 글에 부적절한 내용이 있으면 지적해 주시기 바랍니다. 또한, 궁금하신 점은 블로그 아래에 메시지를 남겨주시면 해결하도록 최선을 다해 도와드리겠습니다.
지원은 최고의 격려입니다!