7부, 버튼 커스터마이징
이번에는 버튼을 커스터마이징하는 방법을 더 간단하게 만들어 보겠습니다.
실제로 앞서 정의한 LSprite, LBitmap 및 기타 클래스를 사용하면 버튼을 정의하는 것이 매우 편리합니다.
다음은 버튼을 추가하는 코드
function gameInit(event){ backLayer = new LSprite(); addChild(backLayer); btn01 = new LButton(new LBitmap(new LBitmapData(imglist["replay_button_up"])),new LBitmap(new LBitmapData(imglist["replay_button_over"]))); btn01.x = 76; btn01.y = 50; backLayer.addChild(btn01); btn02 = new LButton(new LBitmap(new LBitmapData(imglist["quit_button_up"])),new LBitmap(new LBitmapData(imglist["quit_button_over"]))); btn02.x = 76; btn02.y = 100; backLayer.addChild(btn02); btn01.addEventListener(LMouseEvent.MOUSE_DOWN, onmousedown01); btn02.addEventListener(LMouseEvent.MOUSE_DOWN, onmousedown02); } function onmousedown01(event){ alert("btn01 on click"); } function onmousedown02(event){ alert("btn02 on click"); }
원리: LSprite에서 상속받은 LButton 클래스를 생성하고 버튼에 두 개의 그림을 설정한 후 마우스가 해당 위치로 이동할 때 마우스 위치를 듣습니다. 버튼, 버튼 상태를 변경하는 것은 간단한 버튼입니다.
여기에서는 mousemove를 사용하여 마우스 위치를 듣고, LGlobal 클래스에 ButtonList 배열을 추가하고, 버튼을 생성할 때 해당 버튼을 ButtonList에 추가한 다음, 마우스를 움직일 때 버튼 리스트 배열은 마우스가 버튼 위에 있는지 확인하고, 버튼이 삭제되면 버튼이 버튼 리스트 배열에서 삭제됩니다.
일부 수정:
1. LSprite 클래스를 수정하고 die 메소드를 추가합니다. 각 LSprite가 제거될 때 자체 die 메소드를 호출해야 합니다. 이번에는 버튼 등 처리할 이벤트를 버튼리스트에서 삭제해야 합니다.
2. 각 생성자에 objectindex를 추가하여 각 개체를 구분합니다.
3. addChild 메서드를 수정하고 DisplayObject.parent = self를 추가합니다. 이는 각 self 개체에 상위 개체를 할당하는 것을 의미합니다.
준비가 되었으면 버튼 클래스 LButton 만들기를 시작하세요.
function LButton(bitmap_up,bitmap_over){ base(this,LSprite,[]); var self = this; self.type = "LButton"; self.bitmap_up = bitmap_up; self.addChild(bitmap_up); if(bitmap_over == null){ bitmap_over = bitmap_up; }else{ self.addChild(bitmap_over); } self.bitmap_over = bitmap_over; self.bitmap_over.visible = false; self.bitmap_up.visible = true; LGlobal.buttonList.push(self); } LButton.prototype.buttonModeChange = function (){ var self = this; var cood={x:0,y:0}; var parent = self.parent; while(parent != "root"){ cood.x += parent.x; cood.y += parent.y; parent = parent.parent; } if(self.ismouseon(LGlobal.mouseMoveEvent,cood)){ self.bitmap_up.visible = false; self.bitmap_over.visible = true; }else{ self.bitmap_over.visible = false; self.bitmap_up.visible = true; } } LButton.prototype.die = function (){ var self = this; arguments.callee.super.die.call(this); for(var i=0;i<LGlobal.buttonList.length;i++){ if(LGlobal.buttonList[i].objectindex == self.objectindex){ LGlobal.buttonList.splice(i,1); break; } } }
위 내용은 ActionScript와 유사한 구문을 사용하여 html5를 작성하는 것입니다. - 7부, 사용자 정의 버튼의 내용에 대한 자세한 내용은 PHP 중국어 웹사이트(m.sbmmt.com)를 참고하세요!