QuickTiGame2d पर Appcelerator Titanium में खेलें। भाग २

इस लेख के पहले भाग में, " एप्लासरेटर टाइटेनियम में क्विकटीगैम 2 डी प्ले करना। भाग 1, " मैंने इंजन के साथ काम करने के कुछ पहलुओं के बारे में बात की, जो, मेरी राय में, उन लोगों के लिए उपयोगी होंगे जो इस प्रकाशन से परिचित होने वाले हैं। अब मैं Appcelerator Titanium पर सबसे सरल गेम के निर्माण पर विचार करने का प्रस्ताव करता हूं।

खेल का सार यह है कि दिखाई देने वाले अक्षरों से, आपको "टिटानियम" शब्द को इकट्ठा करने की आवश्यकता है, जिसके बाद एक संबंधित जीत संदेश प्रदर्शित किया जाएगा और खेल समाप्त हो जाएगा।

सबसे पहले, pathsToFiles.js फ़ाइल बनाएं, जिसमें हम उपलब्ध संसाधनों को पथ निर्दिष्ट करते हैं:

//menuScene var pngMenuBackground = "pictures/menu/background.png"; var pngButtonNewGame = "pictures/menu/newGame.png"; var pngButtonHelp = "pictures/menu/help.png"; //helpScene var pngHelp = "pictures/help/help.png"; var pngBackFromHelp = "pictures/help/back.png"; //mainLoadingScene var pngMainBackground = "pictures/game/background.png"; var pngBackToMenu = "pictures/game/back.png"; var pngVictory = "pictures/game/victory.png"; var xmlCharactersPosition = "pictures/game/charactersPosition.xml"; //sound var soundClick = "sound/click.wav"; 

सबसे पहले सबसे पहले, आइए देखें app.js. एक गेम स्क्रीन बनाएं, उन js फ़ाइलों को कनेक्ट करें जिनके साथ हम काम करेंगे, और Android और iOS के लिए स्क्रीन लेआउट का भी वर्णन करें:

 var window = Ti.UI.createWindow({ backgroundColor : 'black' }); var quicktigame2d = require('com.googlecode.quicktigame2d'); var game = quicktigame2d.createGameView(); if (Titanium.Platform.osname === 'android') { game.orientation = Ti.UI.LANDSCAPE_LEFT; window.orientationModes = [Titanium.UI.LANDSCAPE_LEFT]; } else { game.orientation = Ti.UI.LANDSCAPE_RIGHT; window.orientationModes = [Titanium.UI.LANDSCAPE_RIGHT]; } Ti.include('pathsToFiles.js'); Ti.include('helpScene.js'); Ti.include('menuScene.js'); Ti.include('mainScene.js'); 

अगला, हम डिवाइस के लिए गेम के आवश्यक पैमाने की गणना करते हैं, लोड किए गए दृश्यों को इनिशियलाइज़ करते हैं, जिसे नीचे वर्णित किया जाएगा, गेम विंडो को एप्लिकेशन विंडो में जोड़ें, इसे खोलें और MenuScene लॉन्च करें।

 var WINDOW_SCALE_FACTOR_X = 1; var WINDOW_SCALE_FACTOR_Y = 1; game.addEventListener('onload', function(e) { var screenScale = game.size.height / 640; game.screen = { width : game.size.width / screenScale, height : game.size.height / screenScale }; WINDOW_SCALE_FACTOR_X = game.screen.width / game.size.width; WINDOW_SCALE_FACTOR_Y = game.screen.height / game.size.height; MenuScene.init(); HelpScene.init(); MainScene.init(); game.pushScene(MenuScene.scene); game.start(); }); window.add(game); window.open({ fullscreen : true, navBarHidden : true }); 

अब खेल के लिए MenuScene बनाते हैं। शुरू करने के लिए, सीधे इसे बनाएं:

 var buttonMargin = 20; var clickSound = null; var MenuScene = { scene : null, background : null, buttonNewGame : null, buttonHelp : null, init : function() { this.scene = quicktigame2d.createScene(); ... }, }; 

यहाँ बटनमैरिज इंडेंटेशन है जो बाद में उपयोग किया जाएगा, और क्लिकसाउंड ध्वनि संग्रह के लिए एक चर है।

अब यह कुछ क्रियाओं को जोड़ने के लायक है। स्प्राइट लोड करते समय करंट सीन चलाएं:

  var onloadsprite = (function(self) { return function(e) { if (e.name == pngButtonHelp) { game.startCurrentScene(); } }; })(this); 

हमें "नया गेम" और "सहायता" बटन पर क्लिक करने की घटनाओं का वर्णन करें। जब आप दबाते हैं और जब आप बटन जारी करते हैं, तो इसकी तस्वीर बदल जाएगी। इसके अलावा, जब दबाया जाता है, तो एक छोटी ध्वनि उत्सर्जित होगी, और जब "उदास", खेल का दृश्य चयनित एक में बदल जाएगा:

 var touchstart = (function(self) { return function(e) { var x = ex * WINDOW_SCALE_FACTOR_X; var y = ey * WINDOW_SCALE_FACTOR_Y; if (self.buttonNewGame.contains(x, y)) { self.buttonNewGame.frame = 0; clickSound.play(); } if (self.buttonHelp.contains(x, y)) { self.buttonHelp.frame = 0; clickSound.play(); } } })(this); var touchend = (function(self) { return function(e) { var x = ex * WINDOW_SCALE_FACTOR_X; var y = ey * WINDOW_SCALE_FACTOR_Y; self.buttonNewGame.frame = 1; self.buttonHelp.frame = 1; if (self.buttonNewGame.contains(x, y)) { game.pushScene(MainScene.scene); } if (self.buttonHelp.contains(x, y)) { game.pushScene(HelpScene.scene); } }; })(this); 

अब वैरिएबल को इनिशियलाइज़ करें और बटन के कॉर्डिनेट और गेम मेन्यू की पृष्ठभूमि सेट करें। दृश्य, साथ ही घटना श्रोताओं के लिए उपयुक्त तत्व जोड़ें:

 var activated = (function(self) { return function(e) { if (clickSound == null) { clickSound = Ti.Media.createSound({ url : soundClick }); } if (self.background == null) { self.background = quicktigame2d.createSprite({ image : pngMenuBackground }); } if (self.buttonNewGame == null) { self.buttonNewGame = quicktigame2d.createSpriteSheet({ image : pngButtonNewGame, width : 275, height : 100 }); } if (self.buttonHelp == null) { self.buttonHelp = quicktigame2d.createSpriteSheet({ image : pngButtonHelp, width : 275, height : 100 }); } self.background.x = (game.screen.width * 0.5) - (self.background.width * 0.5); self.background.y = (game.screen.height * 0.5) - (self.background.height * 0.5); self.buttonNewGame.x = (game.screen.width - self.buttonNewGame.width) / 4; self.buttonNewGame.y = (game.screen.height * 0.8); self.buttonHelp.x = (game.screen.width - self.buttonNewGame.width) / 4*3; self.buttonHelp.y = self.buttonNewGame.y; self.buttonNewGame.frame = 1; self.buttonHelp.frame = 1; self.scene.add(self.background); self.scene.add(self.buttonNewGame); self.scene.add(self.buttonHelp); game.addEventListener('touchstart', touchstart); game.addEventListener('touchend', touchend); self.scene.addEventListener('enterframe', enterframe); }; })(this); 

हम सभी बनाए गए तत्वों को हटाने के कार्य का वर्णन करते हैं (बनावट को हटाते हुए, ईवेंट श्रोताओं को हटाते हुए):

 var deactivated = (function dea(self) { return function(e) { self.scene.remove(self.background); self.background = null; self.scene.remove(self.buttonNewGame); self.scene.remove(self.buttonHelp); self.buttonNewGame = null; self.buttonHelp = null; game.unloadTexture(pngButtonNewGame); game.unloadTexture(pngButtonHelp); game.removeEventListener('touchstart', touchstart); game.removeEventListener('touchend', touchend); }; })(this); 

यह केवल श्रोताओं को सक्रियण / दृश्यों को निष्क्रिय करने और स्प्रिंग्स को निष्क्रिय करने की घटनाओं को जोड़ने के लिए बना हुआ है:

  this.scene.addEventListener('activated', activated); this.scene.addEventListener('deactivated', deactivated); this.scene.addEventListener('onloadsprite', onloadsprite); 

मेनू दृश्य तैयार है। चलिए मदद दृश्य पर चलते हैं। सिद्धांत रूप में, लोडिंग और अनलोडिंग तत्वों की सभी प्रक्रियाएं बहुत समान हैं, इसलिए हम खुद को दोहराएंगे नहीं और उन तत्वों पर विचार करेंगे जो हमारे लिए सबसे अधिक रुचि रखते हैं। उनमें से एक एक मदद पृष्ठभूमि बना रहा है:

  if (self.background == null) { self.background = quicktigame2d.createSprite({ image : pngMenuBackground }); } if (self.menuLayer == null) { self.menuLayer = quicktigame2d.createSprite({ width : self.background.width, height : self.background.height }); self.menuLayer.color(0.5, 0.5, 0.5); self.menuLayer.alpha = 0.78; } if (self.foreground == null) { self.foreground = quicktigame2d.createSpriteSheet({ image : pngHelp, width : 960, height : 640 }); } 

यहां हम पृष्ठभूमि की 3 परतें लोड करते हैं। उनमें से एक मेनू में परत है, यह नीचे होगा। हम शीर्ष पर दूसरी पृष्ठभूमि सेट करते हैं (इसमें रंग और पारदर्शिता है)। तीसरा है टेक्स्ट लेयर। इसके लिए कई छवियों का उपयोग करने के लिए इसे स्प्राइटशीट के रूप में परिभाषित करें।

आइए इसके आकार के सापेक्ष स्क्रीन के कोने में स्थित बटन के स्थान का वर्णन करें:

 if (game.screen.width > self.background.width) { self.okButton.x = self.background.x + self.background.width - self.okButton.width - buttonMargin; self.okButton.y = self.background.y + self.background.height - self.okButton.height - buttonMargin; } else { self.okButton.x = game.screen.width - self.okButton.width - buttonMargin; self.okButton.y = game.screen.height - self.okButton.height - buttonMargin; } 

और एक पृष्ठभूमि पाठ एनीमेशन जोड़ें:

 self.foreground.animate(0, 2, 2000, -1); 

अब खेल के लिए एक दृश्य बनाने के लिए आगे बढ़ते हैं। यह कुछ चर बनाने के लायक है:

 var COUNT_OF_CHARACTERS = 9; var word = ""; var wordTitanium = "titanium"; 

जहां COUNT_OF_CHARACTERS अक्षरों के प्रकट होने के लिए फ़ील्ड पर स्थानों की संख्या है, शब्द एकत्रित शब्द है, शब्दटैनियम संग्रह किए जाने वाला शब्द है।

सक्रिय फ़ंक्शन में, हम अक्षर छवियों के साथ तत्वों की एक सरणी बनाने की प्रक्रिया को जोड़ते हैं:

 var xCoef = self.background.width / 4; var yCoef = self.background.height / 4; var xParam = 1; var yParam = 1; for (var i = 0; i < COUNT_OF_CHARACTERS; i++) { self.characters[i] = quicktigame2d.createSpriteSheet({ image : xmlCharactersPosition }); self.characters[i].x = self.background.x + xCoef * xParam; self.characters[i].y = self.background.x + yCoef * yParam; xParam++; if (xParam > 3) { xParam = 1; yParam++; } self.characters[i].z = 3; self.characters[i].hide(); self.characters[i].index = i; self.characters[i].status = "waiting"; self.characters[i].selectFrame("character0"); self.scene.add(self.characters[i]); if (self.charactersTransforms[i] == null) { self.charactersTransforms[i] = quicktigame2d.createTransform(); self.charactersTransforms[i].addEventListener('complete', oncharactersCompleted); self.charactersTransforms[i].index = i; } } 

यहां हम प्रत्येक तत्व के लिए स्थान निर्धारित करते हैं, इसे छिपाते हैं, स्थिति, वर्तमान छवि सेट करते हैं। यह प्रत्येक तत्व के लिए अपना स्वयं का ईवेंट श्रोता भी सेट करता है। एक घटना श्रोता इस तरह दिखेगा:

 var oncharactersCompleted = (function(self) { return function(e) { var transform = e.source; var choosenCharacter = self.characters[transform.index]; if (choosenCharacter != null) { if (choosenCharacter.status == "moving") { choosenCharacter.show(); choosenCharacter = changeStatus(choosenCharacter, transform, "living"); } else if (choosenCharacter.status == "living") { choosenCharacter = changeStatus(choosenCharacter, transform, "dying"); } else if (choosenCharacter.status == "dying") { choosenCharacter = changeStatus(choosenCharacter, transform, "hiding"); } else if (choosenCharacter.status == "hiding") { transform.scale(0, 0); choosenCharacter = changeStatus(choosenCharacter, transform, "queue_waiting"); } else if (choosenCharacter.status == "queue_waiting") { choosenCharacter.hide(); choosenCharacter.status = "waiting"; transform.duration = 1000; choosenCharacter.transform(transform); } else if (choosenCharacter.status == "killed") { transform.rotate(-360); transform.scale(0, 0); choosenCharacter = changeStatus(choosenCharacter, transform, "queue_waiting"); } } }; })(this); function changeStatus(choosenCharacter, transform, statuscharacter) { transform.duration = 2000; choosenCharacter.status = statuscharacter; choosenCharacter.transform(transform); return choosenCharacter; } 

यहां, तत्व की स्थिति के आधार पर, इसके साथ विभिन्न क्रियाएं होंगी: स्क्रीन पर घुमाव, ज़ूमिंग, छिपाना और दिखाई देना।

खेल को समाप्त करने के लिए एक विधि जोड़ें, जिसमें हम पहले से टाइप किए गए शब्द में पाठ को हटाते हैं, और उस दृश्य की जानकारी भी जोड़ते हैं जो खिलाड़ी जीता था, जो बदले में श्रोता को जीत के लिए बुलाएगा:

 function finishActivity(self) { word = ""; self.scene.add(self.victoryText); self.victoryTextTransform.duration = 1000; self.victoryText.transform(self.victoryTextTransform); } var onVictoryTextCompleted = (function(self) { return function(e) { if (self.victoryTextTransform.completed) { self.scene.remove(self.victoryText); closeGame(self); } else { self.victoryTextTransform.y = game.screen.height; self.victoryTextTransform.completed = true; self.victoryText.transform(self.victoryTextTransform); } }; })(this); 

एंटरफ़्रेम में, आपको संबंधित तत्वों में अक्षरों को बदलने की प्रक्रिया को जोड़ना चाहिए। यह तब होगा जब स्थिति प्रतीक्षा कर रही है: तत्व स्क्रीन पर उनके लिए एक यादृच्छिक रूप से बनाए गए पत्र के साथ दिखाई देंगे।

 self.charactersTransforms[i].show(); self.charactersTransforms[i].scale(1, 1); self.charactersTransforms[i].duration = 500; self.charactersTransforms[i].delay = 0; self.charactersTransforms[i].easing = quicktigame2d.ANIMATION_CURVE_CUBIC_IN; var face = Math.floor((randomNumber * 100) % 8); for (var count = 0; count < wordTitanium.length; count++) { if (face == count) { self.characters[i] = addDataToWord(self.characters[i], self.charactersTransforms[i], "character"+count, wordTitanium[count]); self.characters[i].transform(self.charactersTransforms[i]); break; } } 

AddDataToWord फ़ंक्शन कहां है:

 function addDataToWord(choosenCharacter, choosenCharacterTransform, frame, symbol) { choosenCharacter.isMoving = false; choosenCharacter.faceName = frame; choosenCharacter.symbol = symbol; choosenCharacter.status = "moving"; choosenCharacter.selectFrame(frame); choosenCharacterTransform.duration = 0; choosenCharacter.transform(choosenCharacterTransform); return choosenCharacter; } 

अंतिम चीज़ को करने के लिए तत्व पर क्लिक करने के कार्य को पंजीकृत करना है:

 var dblclick = (function(self) { return function(e) { var x = ex * WINDOW_SCALE_FACTOR_X; var y = ey * WINDOW_SCALE_FACTOR_Y; if (!self.loaded) return; if (!self.started) return; for (var i = 0; i < COUNT_OF_CHARACTERS; i++) { if (self.characters[i].status != "killed") { if (self.characters[i].contains(x, y)) { clickSound.play(); self.charactersTransforms[i].rotate(360); self.charactersTransforms[i].duration = 2000; self.characters[i].transform(self.charactersTransforms[i]); self.characters[i].status = "killed"; word += self.characters[i].symbol; Ti.API.info(word); if (wordTitanium.indexOf(word) == 0) { Ti.API.info(word + " " + wordTitanium); if(wordTitanium.length == word.length){ finishActivity(self); } } else { word = ""; } } } } }; })(this); 

उसी समय, हम इसकी स्थिति बदलते हैं, एनीमेशन जोड़ते हैं और इसी शब्द में अक्षरों के क्रम में इस पत्र की घटना की जांच करते हैं।

परिणामी परिणाम: