விளையாட்டு வளர்ச்சிக்கான ஃபேஸருடன் தொடங்குவது

ஃபேசர் என்பது 2 டி வீடியோ கேம்களை உருவாக்குவதற்கான ஒரு கட்டமைப்பாகும். இது விளையாட்டை காண்பிக்க HTML5 கேன்வாஸ் மற்றும் விளையாட்டை இயக்க ஜாவாஸ்கிரிப்ட் பயன்படுத்துகிறது. வெண்ணிலா ஜாவாஸ்கிரிப்ட் மீது ஃபேஸரைப் பயன்படுத்துவதன் நன்மை என்னவென்றால், வீடியோ கேம்களின் இயற்பியலின் பெரும்பகுதியை நிறைவு செய்யும் ஒரு விரிவான நூலகத்தைக் கொண்டுள்ளது, இது விளையாட்டை வடிவமைப்பதில் கவனம் செலுத்த உங்களை அனுமதிக்கிறது.

ஃபேசர் வளர்ச்சி நேரத்தைக் குறைக்கிறது மற்றும் பணிப்பாய்வை எளிதாக்குகிறது. ஃபேஸர் மூலம் ஒரு அடிப்படை விளையாட்டை எப்படி உருவாக்குவது என்று கற்றுக்கொள்வோம்.

---

---

ஃபேஸர் மூலம் ஏன் உருவாக்க வேண்டும்?

ஃபேசர் நிரல் லூப் செய்யப்பட்ட புதுப்பிப்புகளை அடிப்படையாகக் கொண்ட மற்ற காட்சி நிரலாக்க மொழிகளைப் போன்றது. ஃபேஸர் மூன்று முக்கிய நிலைகளைக் கொண்டுள்ளது: முன் ஏற்றவும், உருவாக்கவும் மற்றும் புதுப்பிக்கவும்.

முன் ஏற்றத்தில், விளையாட்டின் சொத்துக்கள் பதிவேற்றப்பட்டு விளையாட்டுக்கு கிடைக்கச் செய்யப்படுகின்றன.

உருவாக்கம் விளையாட்டை ஆரம்பிக்கிறது மற்றும் அனைத்து தொடக்க விளையாட்டு கூறுகளையும் உருவாக்குகிறது. விளையாட்டு தொடங்கும் போது அந்த செயல்பாடுகள் ஒவ்வொன்றும் ஒரு முறை இயக்கப்படும்.

மறுபுறம், புதுப்பிப்பு விளையாட்டு முழுவதும் ஒரு சுழலில் இயங்குகிறது. விளையாட்டின் கூறுகளை ஊடாடும் வகையில் புதுப்பிக்கும் பணிக்குதிரை இது.

ஃபேஸர் மூலம் விளையாட்டுகளை வளர்க்க உங்கள் அமைப்பை அமைக்கவும்

அந்த பேஸர் HTML மற்றும் ஜாவாஸ்கிரிப்டில் இயங்கினாலும், விளையாட்டுகள் உண்மையில் சர்வர் பக்கமாக இயங்குகின்றன, கிளையன்ட் பக்கமாக அல்ல. இதன் பொருள் நீங்கள் உங்கள் விளையாட்டை இயக்க வேண்டும் உங்கள் உள்ளூர் ஹோஸ்ட் . கேம் சர்வர் பக்கத்தை இயக்குவது உங்கள் கேமை நிரலுக்கு வெளியே கூடுதல் கோப்புகள் மற்றும் சொத்துக்களை அணுக அனுமதிக்கிறது. நான் பரிந்துரைக்கிறேன் ஒரு உள்ளூர் ஹோஸ்டை அமைக்க XAMPP ஐப் பயன்படுத்துதல் உங்களிடம் ஏற்கனவே ஒரு அமைப்பு இல்லையென்றால்.

---

---

கீழே உள்ள குறியீடு உங்களை எழுப்பி இயங்க வைக்கும். இது ஒரு அடிப்படை விளையாட்டு சூழலை அமைக்கிறது.







var config = {
type: Phaser.AUTO,
backgroundColor: 0xCCFFFF,
width: 600,
height: 600,
physics: {
default: 'arcade'
},
scene: {
preload: preload,
create: create
}
};

var gamePiece;
var game = new Phaser.Game(config);

function preload(){
this.load.image('gamePiece', 'img/gamePiece.png');
}

function create(){
gamePiece = this.physics.add.sprite(270, 450, 'gamePiece');
}




விளையாட்டை இயக்க, உங்கள் உள்ளூர் ஹோஸ்டில் உள்ள 'img' கோப்புறையில் சேமிக்கப்பட்ட 'கேம்பீஸ்' என்ற PNG படம் தேவை. எளிமைக்காக, இந்த உதாரணம் 60xgame de60px ஆரஞ்சு சதுரத்தைப் பயன்படுத்துகிறது. உங்கள் விளையாட்டு இப்படி இருக்க வேண்டும்:

---

---

நீங்கள் ஒரு சிக்கலை எதிர்கொண்டால், உங்கள் உலாவியின் பிழைத்திருத்தியைப் பயன்படுத்தி என்ன தவறு நடந்தது என்பதைக் கண்டறியவும். ஒற்றை எழுத்தை கூட காணாமல் போவது அழிவை ஏற்படுத்தும், ஆனால் பொதுவாக, உங்கள் பிழைதிருத்தம் அந்த சிறிய பிழைகளைப் பிடிக்கும்.

அமைவு குறியீட்டை விளக்குகிறது

இதுவரை, விளையாட்டு எதையும் செய்யவில்லை. ஆனால் நாங்கள் ஏற்கனவே நிறைய நிலங்களை மூடிவிட்டோம்! குறியீட்டை இன்னும் ஆழமாகப் பார்ப்போம்.

ஒரு ஃபேசர் கேம் இயங்க, நீங்கள் ஃபேசர் லைப்ரரியை இறக்குமதி செய்ய வேண்டும். நாங்கள் இதை வரி 3 இல் செய்கிறோம். இந்த எடுத்துக்காட்டில், நாங்கள் மூலக் குறியீட்டை இணைத்தோம், ஆனால் நீங்கள் அதை உங்கள் உள்ளூர் ஹோஸ்டில் பதிவிறக்கம் செய்து கோப்பையும் குறிப்பிடலாம்.

பாடல்களை இலவசமாக பதிவிறக்கம் செய்வது எப்படி

குறியீட்டின் பெரும்பகுதி விளையாட்டு சூழலை கட்டமைக்கிறது, இது மாறி கட்டமைப்பு கடைகள். எங்கள் எடுத்துக்காட்டில், 600px ஆல் 600px ஆக இருக்கும் நீல (ஹெக்ஸ் கலர் குறியீட்டில் CCFFFF) பின்னணியுடன் ஒரு ஃபேசர் விளையாட்டை அமைத்து வருகிறோம். இப்போதைக்கு, விளையாட்டு இயற்பியல் அமைக்கப்பட்டுள்ளது ஆர்கேடியன் , ஆனால் ஃபேசர் வெவ்வேறு இயற்பியலை வழங்குகிறது.

இறுதியாக, காட்சி நிரலை இயக்கச் சொல்கிறது முன் ஏற்ற விளையாட்டு தொடங்கும் முன் செயல்பாடு மற்றும் உருவாக்க விளையாட்டைத் தொடங்குவதற்கான செயல்பாடு. இந்த தகவல் அனைத்தும் விளையாட்டு பொருளுக்கு அனுப்பப்படுகிறது விளையாட்டு .

தொடர்புடையது: நிரலாக்க மற்றும் குறியீட்டுக்கான 6 சிறந்த மடிக்கணினிகள்

குறியீட்டின் அடுத்த பகுதி விளையாட்டு உண்மையில் வடிவம் பெறுகிறது. ப்ரீலோட் செயல்பாடு என்பது உங்கள் விளையாட்டை இயக்க தேவையான எதையும் துவக்க வேண்டும். எங்கள் விஷயத்தில், எங்கள் கேம் பீஸின் படத்தை முன்பே ஏற்றியுள்ளோம். முதல் அளவுரு .படம் எங்கள் படத்தை பெயரிடுகிறது மற்றும் இரண்டாவது படத்தை எங்கு கண்டுபிடிப்பது என்று நிரலுக்கு சொல்கிறது.

விளையாட்டு செயல்பாட்டில் கேம் பீஸ் படம் சேர்க்கப்பட்டது. வரி 29 கூறுகிறது, எங்கள் விளையாட்டுப் பகுதியின் மேல் இடது மூலையில் இருந்து 270px இடது மற்றும் 450px கீழே ஒரு ஸ்பிரைட் பட கேம்பீஸ் சேர்க்கிறோம்.

எங்கள் கேம் பீஸ் நகர்வை உருவாக்குதல்

இதுவரை, இதை ஒரு விளையாட்டு என்று அழைக்க முடியாது. ஒன்று, எங்களால் எங்கள் விளையாட்டுப் பகுதியை நகர்த்த முடியாது. எங்கள் விளையாட்டில் விஷயங்களை மாற்ற, நாம் ஒரு மேம்படுத்தல் செயல்பாட்டை சேர்க்க வேண்டும். நாங்கள் விளையாட்டை புதுப்பிக்கும்போது எந்த செயல்பாட்டை இயக்க வேண்டும் என்பதை விளையாட்டிற்கு சொல்ல கட்டமைப்பு மாறியில் காட்சியை சரிசெய்ய வேண்டும்.

புதுப்பிப்பு செயல்பாட்டைச் சேர்த்தல்

உள்ளமைவில் புதிய காட்சி:

scene: {
preload: preload,
create: create,
update: update
}

அடுத்து, உருவாக்கும் செயல்பாட்டிற்கு கீழே ஒரு மேம்படுத்தல் செயல்பாட்டைச் சேர்க்கவும்:

இணையத்துடன் இணைக்கப்பட்டுள்ளது ஆனால் அணுகல் இல்லை

function update(){
}

முக்கிய உள்ளீடுகளைப் பெறுதல்

அம்பு விசைகளுடன் விளையாட்டுத் துண்டைக் கட்டுப்படுத்த பிளேயரை அனுமதிக்க, பிளேயர் எந்த விசைகளை அழுத்துகிறார் என்பதைக் கண்காணிக்க ஒரு மாறியைச் சேர்க்க வேண்டும். நாம் கீம்பீஸை அறிவித்த கீ கீ இன்பட்ஸ் எனப்படும் மாறியை கீழே அறிவிக்கவும். அங்கு அறிவித்தால் அனைத்து செயல்பாடுகளும் புதிய மாறியை அணுகும்.

var gamePiece;
var keyInputs;

உருவாக்கும் செயல்பாட்டில் விளையாட்டு உருவாக்கப்படும்போது கீஇன்பட் மாறியை துவக்க வேண்டும்.

function create(){
gamePiece = this.physics.add.sprite(270, 450, 'gamePiece');
keyInputs = this.input.keyboard.createCursorKeys();
}

இப்போது புதுப்பிப்பு செயல்பாட்டில், பிளேயர் அம்பு விசையை அழுத்துகிறாரா என்பதை நாம் சரிபார்க்கலாம், அவர்கள் இருந்தால், அதற்கேற்ப எங்கள் கேம் பீஸை நகர்த்தவும். கீழே உள்ள எடுத்துக்காட்டில், விளையாட்டு துண்டு 2px நகர்த்தப்பட்டது, ஆனால் நீங்கள் அதை பெரியதாகவோ அல்லது சிறியதாகவோ செய்யலாம். ஒரு நேரத்தில் துண்டு 1px ஐ நகர்த்துவது கொஞ்சம் மெதுவாகத் தோன்றியது.

function update(){
if(keyInputs.left.isDown){
gamePiece.x = gamePiece.x - 2;
}
if(keyInputs.right.isDown){
gamePiece.x = gamePiece.x + 2;
}
if(keyInputs.up.isDown){
gamePiece.y = gamePiece.y - 2;
}
if(keyInputs.down.isDown){
gamePiece.y = gamePiece.y + 2;
}
}

விளையாட்டு இப்போது நகர்த்தக்கூடிய தன்மையைக் கொண்டுள்ளது! ஆனால் உண்மையாக ஒரு விளையாட்டாக இருக்க, நமக்கு ஒரு குறிக்கோள் தேவை. சில தடைகளைச் சேர்ப்போம். 8-பிட் சகாப்தத்தில் நிறைய விளையாட்டுகளுக்கு அடிப்படையான தடைகள் இருந்தன.

விளையாட்டுக்கு தடைகளைச் சேர்த்தல்

இந்த குறியீடு உதாரணம் தடையாக 1 மற்றும் தடையாக 2 எனப்படும் இரண்டு தடையான ஸ்பிரிட்களைப் பயன்படுத்துகிறது. தடையாக 1 நீல சதுரம் மற்றும் தடையாக 2 பச்சை. கேம்ப்பீஸ் ஸ்பிரைட்டைப் போலவே ஒவ்வொரு படமும் முன்பே ஏற்றப்பட வேண்டும்.

function preload(){
this.load.image('gamePiece', 'img/gamePiece.png');
this.load.image('obstacle1', 'img/obstacle1.png');
this.load.image('obstacle2', 'img/obstacle2.png');
}

கேம்ப்பீஸைப் போலவே ஒவ்வொரு தடையும் ஸ்ப்ரைட் உருவாக்கும் செயல்பாட்டில் துவக்கப்பட வேண்டும்.

function create(){
gamePiece = this.physics.add.sprite(270, 450, 'gamePiece');
keyInputs = this.input.keyboard.createCursorKeys();
obstacle1 = this.physics.add.sprite(200, 0, 'obstacle1');
obstacle2 = this.physics.add.sprite(0, 200, 'obstacle2');
}

தடைகளை நகர்த்துவது

இந்த நேரத்தில் துண்டுகளை நகர்த்த, பிளேயர் உள்ளீட்டை நாங்கள் பயன்படுத்த விரும்பவில்லை. அதற்கு பதிலாக, ஒரு துண்டு மேலிருந்து கீழாகவும், மற்றொன்று இடமிருந்து வலமாகவும் நகரட்டும். அதைச் செய்ய, புதுப்பிப்பு செயல்பாட்டில் பின்வரும் குறியீட்டைச் சேர்க்கவும்:

obstacle1.y = obstacle1.y + 4;
if(obstacle1.y > 600){
obstacle1.y = 0;
obstacle1.x = Phaser.Math.Between(0, 600);
}

obstacle2.x = obstacle2.x + 4;
if(obstacle2.x > 600){
obstacle2.x = 0;
obstacle2.y = Phaser.Math.Between(0, 600);
}

மேலே உள்ள குறியீடு ஒவ்வொரு சட்டத்திற்கும் 4px விளையாட்டு பகுதி முழுவதும் தடையாக 1 மற்றும் தடையாக 2 ஐ நகர்த்தும். ஒரு சதுரம் திரையில் இருந்து விலகியவுடன், அது ஒரு புதிய சீரற்ற இடத்தில் எதிர் பக்கத்திற்கு நகர்த்தப்படும். இது வீரருக்கு எப்போதும் ஒரு புதிய தடையாக இருப்பதை உறுதி செய்யும்.

மோதல்களைக் கண்டறிதல்

ஆனால் நாங்கள் இன்னும் முடிக்கவில்லை. எங்கள் வீரர் தடைகளை கடந்து செல்ல முடியும் என்பதை நீங்கள் கவனித்திருக்கலாம். வீரர் ஒரு தடையை தாக்கி விளையாட்டை முடிக்கும்போது விளையாட்டை நாம் கண்டறிய வேண்டும்.

ஃபேசர் இயற்பியல் நூலகத்தில் ஒரு மோதல் கண்டுபிடிப்பான் உள்ளது. நாம் செய்ய வேண்டியது அதை உருவாக்கும் செயல்பாட்டில் துவக்குவதுதான்.

this.physics.add.collider(gamePiece, obstacle1, function(gamePiece, obstacle1){
gamePiece.destroy();
obstacle.destroy();
obstacle2.destroy();
});
this.physics.add.collider(gamePiece, obstacle2, function(gamePiece, obstacle2){
gamePiece.destroy();
obstacle.destroy();
obstacle2.destroy();
});

கோலிடர் முறைக்கு மூன்று அளவுருக்கள் தேவை. எந்த இரண்டு பொருள்கள் மோதுகின்றன என்பதை முதல் இரண்டு அளவுருக்கள் அடையாளம் காட்டுகின்றன. எனவே மேலே, எங்களிடம் இரண்டு மோதல்கள் அமைக்கப்பட்டுள்ளன. கேம்பீஸ் தடையாக 1 உடன் மோதும்போது முதலாவது கண்டறியப்படுகிறது மற்றும் இரண்டாவது மோதலானது கேம்பீஸ் மற்றும் தடையாக 2 இடையே மோதல்களைத் தேடுகிறது.

மோதலைக் கண்டறிந்தவுடன் என்ன செய்ய வேண்டும் என்று மூன்றாவது அளவுரு மோதலுக்குச் சொல்கிறது. இந்த எடுத்துக்காட்டில், ஒரு செயல்பாடு உள்ளது. மோதல் ஏற்பட்டால், அனைத்து விளையாட்டு கூறுகளும் அழிக்கப்படும்; இது விளையாட்டை நிறுத்துகிறது. அவர்கள் தடையாக இருந்தால் இப்போது வீரர் விளையாடுவார்.

விளையாட்டு வளர்ச்சியை ஃபேஸர் மூலம் முயற்சிக்கவும்

இந்த விளையாட்டை மேம்படுத்தவும் மேலும் சிக்கலாக்கவும் பல வழிகள் உள்ளன. நாங்கள் ஒரு பிளேயரை மட்டுமே உருவாக்கியுள்ளோம், ஆனால் இரண்டாவது விளையாடக்கூடிய கதாபாத்திரத்தை 'awsd' கட்டுப்பாடுகளுடன் சேர்த்து கட்டுப்படுத்தலாம். இதேபோல், நீங்கள் அதிக தடைகளைச் சேர்த்து அவற்றின் இயக்கத்தின் வேகத்தை வேறுபடுத்தி பரிசோதனை செய்யலாம்.

உங்கள் விண்டோஸ் 10 ஐ எப்படி வேகமாக செய்வது

இந்த அறிமுகம் உங்களைத் தொடங்கும், ஆனால் கற்றுக்கொள்ள இன்னும் நிறைய இருக்கிறது. ஃபேஸரைப் பற்றிய பெரிய விஷயம் என்னவென்றால், நிறைய விளையாட்டு இயற்பியல் உங்களுக்காக செய்யப்படுகிறது. 2 டி கேம்களை வடிவமைக்கத் தொடங்க இது ஒரு சிறந்த வழியாகும். இந்த குறியீட்டை உருவாக்கவும் மற்றும் உங்கள் விளையாட்டை செம்மைப்படுத்தவும்.

நீங்கள் ஏதேனும் பிழைகளைச் சந்தித்தால், உங்கள் உலாவி பிழைத்திருத்தி சிக்கலைக் கண்டறிய ஒரு சிறந்த வழியாகும்.

பகிர் பகிர் ட்வீட் மின்னஞ்சல் வலைத்தள சிக்கல்களை சரிசெய்ய Chrome DevTools ஐ எவ்வாறு பயன்படுத்துவது

உங்கள் வலைத்தளங்களை மேம்படுத்த Chrome உலாவியின் உள்ளமைக்கப்பட்ட மேம்பாட்டுக் கருவிகளைப் பயன்படுத்துவது எப்படி என்பதை அறிக.

அடுத்து படிக்கவும் தொடர்புடைய தலைப்புகள்

• நிரலாக்க
• ஜாவாஸ்கிரிப்ட்
• HTML5
• விளையாட்டு மேம்பாடு

எழுத்தாளர் பற்றி ஜெனிபர் சீடன்(21 கட்டுரைகள் வெளியிடப்பட்டன)

ஜே. சீடன் ஒரு அறிவியல் எழுத்தாளர், சிக்கலான தலைப்புகளை உடைப்பதில் நிபுணத்துவம் பெற்றவர். அவர் சஸ்காட்செவான் பல்கலைக்கழகத்தில் முனைவர் பட்டம் பெற்றார்; மாணவர்களின் ஈடுபாட்டை ஆன்லைனில் அதிகரிக்க விளையாட்டு அடிப்படையிலான கற்றலைப் பயன்படுத்துவதில் அவரது ஆராய்ச்சி கவனம் செலுத்தியது. அவள் வேலை செய்யாதபோது, ​​அவளுடைய வாசிப்பு, வீடியோ கேம்ஸ் அல்லது தோட்டக்கலை ஆகியவற்றைக் காணலாம்.

ஜெனிபர் சீட்டனிடமிருந்து மேலும்

எங்கள் செய்திமடலுக்கு குழுசேரவும்

தொழில்நுட்ப குறிப்புகள், மதிப்புரைகள், இலவச மின் புத்தகங்கள் மற்றும் பிரத்யேக ஒப்பந்தங்களுக்கு எங்கள் செய்திமடலில் சேரவும்!

குழுசேர இங்கே சொடுக்கவும்