For example, suppose I have a parent component called PopupComponent:
//PopupComponent.js
cc.Class({
extends: cc.Component,
properties: {
},
getName(){
return "";
},
showPopup(){
}
});
And 3 child classes extend from PopupComponent:
//BigPrizePopupComponent.js
cc.Class({
extends: require('PopupComponent'),
properties: {
animation:{
type:cc.Animation,
default:null
}
},
getPrizeName(){
return "Big";
},
showPopup(){
alert("Big Prize Popup shows");
}
});
//SmallPrizePopupComponent.js
cc.Class({
extends: require('PopupComponent'),
properties: {
armatureDisplay:{
type:dragonBones.ArmatureDisplay,
default:null
}
},
getPrizeName(){
return "Small";
},
showPopup(){
alert("Small Prize Popup shows");
}
});
//MiniPrizePopupComponent.js
cc.Class({
extends: require('PopupComponent'),
properties: {
particleSystem:{
type:cc.ParticleSystem,
default:null
}
},
getPrizeName(){
return "Mini";
},
showPopup(){
alert("Mini Prize Popup shows");
}
});
What I want to do is, show either one PopupComponent depend on the input (may be from server or text field entered by user), When I try to implement the logic in the main scene:
cc.Class({
extends: cc.Component,
properties: {
label: {
default: null,
type: cc.Label
},
// defaults, set visually when attaching this script to the Canvas
text: 'Hello, World!',
popupComponentArray:{
type:[require('PopupComponent')],
default:[]
}
},
onLoad: function () {
let prizeName="Big"; //some prizeName from dynamic data such as http/database in real code
for(const popupComponent of this.popupComponentArray){
if(popupComponent.getPrizeName() == prizeName){
popupComponent.node.active=true;
popupComponent.showPopup();
}else{
popupComponent.node.active=false;
}
}
}
});
, the field in the editor:
popupComponentArray:{
type:[require('PopupComponent')],
default:[]
}
doesn’t allow me to put BigPrizePopupComponent into the array (but it can if the component is PopupComponent), is there any other ways to simulate type polymorphism in the properties field?
