एचटीएमएल 5 गेम (कैनवस) - यूआई तकनीक?

Question

मैं PhoneGap के साथ मोबाइल (Android / iPhone / WebOS) के लिए एक जावास्क्रिप्ट / HTML5 गेम (कैनवस का उपयोग करके) बनाने की प्रक्रिया में हूं। मैं वर्तमान में यह पता लगाने की कोशिश कर रहा हूं कि यूआई और प्लेइंग बोर्ड का निर्माण कैसे किया जाना चाहिए और उन्हें कैसे बातचीत करनी चाहिए लेकिन मुझे यकीन नहीं है कि सबसे अच्छा समाधान क्या है। यहाँ मैं क्या सोच सकता हूँ -

DrawImage और fillText जैसी चीज़ों का उपयोग करके कैनवस में UI सही बनाएं और नियमित DOM ऑब्जेक्ट्स का उपयोग करके कैनवस के बाहर UI के कुछ हिस्सों का निर्माण करें और तब UI पर एक div फ़्लोट करें जब UI तत्वों को प्लेइंग बोर्ड कैनवास को ओवरलैप करने की आवश्यकता हो। क्या कोई अन्य संभव तकनीक है जिसका उपयोग मैं गेम यूआई के निर्माण के लिए कर सकता हूं जिसके बारे में मैंने नहीं सोचा है? इसके अलावा, इनमें से कौन सा "मानक" तरीका माना जाएगा (मुझे पता है कि एचटीएमएल 5 गेम बहुत लोकप्रिय नहीं हैं इसलिए शायद "मानक" तरीका नहीं है)? और अंत में, आप किस तरह से सिफारिश / उपयोग करेंगे?

अग्रिम में बहुत धन्यवाद!

Comments

ध्यान रखें कि कैन आईई में अभी तक समर्थित नहीं है (आईई 9 कथित तौर पर) ... ताकि आपके गेम के लिए एक बड़ा बाजार हिस्सा निकल जाए। एक जावास्क्रिप्ट पैच है जो इसे IE में काम करने के लिए प्राप्त करने का प्रयास करता है, लेकिन यह अच्छी तरह से काम करने से कम हो जाता है (नरक के रूप में कम ... इसके लायक नहीं)।

@ अदम - देखें फ्लैशस्कैन: फ्लैशस्कैन.नेट

— एहसानुल

मैं गुई के रूप में डोम तत्वों का उपयोग करता हूं, एक खिड़की के कैनवास तत्व (वास्तविक खेल) के साथ "विंडोज़" के रूप में फ्लोटिंग डिवल्स। और हमेशा यह विकल्प होता है: developer.mozilla.org/en-US/docs/HTML/Canvas/… :)

— Kikaimaru

Answer 1

दोनों समाधान (आपके कैनवास बनाम पारंपरिक HTML / CSS पर ड्राइंग) पूरी तरह से मान्य हैं और बस ठीक काम करेंगे। कुछ बातों पर विचार करें:

• यदि आप पहले से ही एक कैनवास-आधारित पुस्तकालय का उपयोग कर रहे हैं, तो आपका कोड UI के लिए अतिरिक्त (DOM- आधारित) विधियों के बजाय कैनवास का उपयोग जारी रखने के द्वारा क्लीनर / अधिक व्यवस्थित हो सकता है।
• यदि आपका यूआई बेहद टेक्स्ट-हैवी (डायलॉग्स के साथ) है तो HTML / CSS के जरिए इसे लागू करना सरल हो सकता है। उदाहरण के लिए, पाठ को DOM तत्व में प्रवाहित करना (रैपिंग और पैराग्राफ रिक्ति जैसी सामग्री के साथ) और कैनवास में लागू करने के लिए तुलनात्मक रूप से कठिन है।
• आपके द्वारा उपयोग किए जा रहे पुस्तकालय के आधार पर, आपके कैनवास के मुकाबले DOM तत्वों पर क्लिक हैंडलिंग को लागू करना बहुत आसान हो सकता है। उदाहरण के लिए यदि आप "ओके" बटन पर एक क्लिक का पता लगाना चाहते हैं, तो यह HTML / JS दुनिया में एक तुच्छ कार्य है। लेकिन कैनवास में आपको एक अलग तत्व पर क्लिक सुनने और उसके निर्देशांक को देखने के लिए यह देखने की आवश्यकता होगी कि क्लिक कहां हुआ।
• कुछ उपयोगकर्ता एजेंट (विशेष रूप से मोबाइल उपकरण) पाठ वाले DOM तत्वों का उपयोग करते समय मुश्किल हो सकते हैं। उदाहरण के लिए, मोबाइल सफारी कॉपी / पेस्ट करने के टूल के साथ एक मोडल को पॉप अप करना चाह सकती है। इस व्यवहार को रोकना मुश्किल हो सकता है और संभवतः कैनवास की भूमि में आसान होगा।

इसमें से कुछ व्यक्तिपरक होंगे; एक डेवलपर जिसे मैं जानता हूं कि वह हमेशा कैनवास का उपयोग करना पसंद करता है क्योंकि वह डोम को बदसूरत और क्रियात्मक पाता है। चूंकि या तो समाधान ठीक काम करेगा, मैं आपके ऐप में एक साधारण सिंगल स्क्रीन चुनूंगा, जल्दी से इसे दोनों तरीकों का उपयोग करके अलग से विकसित करूंगा और देखूंगा कि कौन सा आसान / बेहतर लगता है।

शुभकामनाएँ!

Comments

आपके जवाब का धन्यवाद! बहुत अच्छे अंक। मैं वास्तव में अभी अपना खुद का इंजन बना रहा हूं। कैनवास का उपयोग करके इसे शुरू किया, लेकिन CSS3 / WebKit सामान का परीक्षण करने के लिए इसे थोड़ा संशोधित करने जा रहा है। केवल इसलिए कि मैं अपना खुद का निर्माण कर रहा हूं क्योंकि खेल एक 'वास्तविक' इंजन के लिए बहुत सरल है। हमारे पास वास्तव में एक मुख्य गेम लूप भी नहीं है। केवल यही कारण है कि यहां तक ​​कि एनीमेशन के लिए भी है, लेकिन यह देखते हुए कि जो कुछ भी होता है वह शायद हम सिर्फ जरूरत के अनुसार समय पर शुरू / रोक सकते हैं :)

— जेसन एल।

Answer 2

मैं अपने कैनवस इंटरैक्शन के लिए ईज़ीमेलज का उपयोग कर रहा हूं ।

यह बहुत अच्छा है और ठोस डिजाइन की सुविधा देता है। प्रमुख विशेषताओं में से एक जिसने मुझे चुना है वह आपके कैनवास ऑब्जेक्ट्स और डोम तत्वों की स्थिति को सिंक करने की सुविधा थी।

इससे CSS speach बुलबुले और स्थिर UI तत्व जैसे hud फ्रेम और उस तरह की चीज़ को करना आसान हो जाता है।

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

Answer 3

कैनवस मोबाइल प्लेटफॉर्म पर धीमा है, कम से कम मोबाइल सफारी वैसे भी है, इसलिए आप उन वस्तुओं पर सीएसएस आधारित स्थिति का उपयोग करना चाहते हैं। विशेष रूप से "ट्रांसलेर 3 डी" का उपयोग करें, जो वस्तुओं के हार्डवेयर त्वरित प्रतिपादन को चालू करेगा।

कैनवास के लिए CAAT लाइब्रेरी देखें, हालांकि यह तेज़ है और आप CSS समर्थित "एक्टर्स" का उपयोग कर सकते हैं और गेम लॉजिक को नहीं बदल सकते।

मैं अभी तक लिंक पोस्ट नहीं कर सकता, लेकिन यहां कुछ छद्म लिंक http://labs.hyperandroid.com/animation हैं

Comments

मुझे लगता है कि सीएएटी के पेज पर रेपो लिंक पुराने की ओर इशारा करता है इसलिए सुनिश्चित करें कि आप इसके बजाय इसका उपयोग करते हैं! रेपो: github.com/hyperandroid/CAAT

— onedayitwillmake

(क्षमा करें, मैं वर्तमान में प्रति पोस्ट केवल एक लिंक जोड़ सकता हूं) यहां एक डेमो है जिसे मैंने बनाया है जिसमें सीएएटी के लिए हैलो-वर्ल्ड टेम्पलेट शामिल है - onedayitwillmake.com/CAATCirclePack

— onedayitwillmake

लिंक के लिए धन्यवाद, मैं हार जाऊंगा। इसकी जांच - पड़ताल करें। मैंने सुना है कि कैनवस की रंबल धीमी हो रही है, लेकिन मैं वह हूं जो आमतौर पर चीजों को खुद देखना पड़ता है :) मुझे यह भी ध्यान देना चाहिए कि मैं जो गेम बना रहा हूं वह एनिमेशन पर बहुत हल्का है। एक बार में एक मिनट के लिए हर 5-10 सेकंड में एक ही बार और एक ही अंतराल पर एक या दो से अधिक दौड़ना कभी नहीं। पागल कुछ भी नहीं। यह भी सत्यापित करने के लिए, क्या आप कैनवस का उपयोग नहीं करने का सुझाव दे रहे हैं, लेकिन सीएसएस / ट्रांसलेशन 3 डी के साथ सादे पुरानी डोम वस्तुओं का उपयोग कर रहे हैं?

— जेसन एल।

ईमानदार होने के लिए, मैं आपके विशिष्ट परिदृश्य के लिए नहीं कह सकता या नहीं। हालाँकि यदि आप मोबाइल-सफारी को विशिष्ट रूप से लक्षित करना चाहते हैं तो imo ys के साथ सीएसएस का उपयोग करना चाहते हैं। यह करने में बहुत तेज है कि मेरे अनुभव से कैनवास को कम करने की तुलना में। मैं आसानी से 45 छवि आधारित स्प्राइट प्राप्त करने में सक्षम था, जो उन्हें जगह में स्थानांतरित करने के लिए 'ट्रांसफ़ॉर्म 3 डी' का उपयोग करके 30 एफपीएस के आसपास घूम रहा था। सीएसएस में इसे उन वस्तुओं के लिए रखना सुनिश्चित करें जिन्हें आप 'ट्रांसफॉर्म 3 डी' के साथ स्थानांतरित करने की योजना बनाते हैं, अन्यथा वेबकिट उन वस्तुओं को चेतन करेगा जहां रखने के बजाय निर्दिष्ट किया गया है। -वेबकैट-संक्रमण: ट्रांसफॉर्म 3 डी 0 एस रैखिक;

— onedayitwillmake

Answer 4

IPhone 4 पर कैनवास की सुस्ती के बारे में सहमत होना। सुंदर यकीन है कि सफारी कैनवास GL द्वारा समर्थित नहीं है। मेरा cheezy खेल iPhone 3GS और Android पर तेजी से चलता है, लेकिन iPhone 4 पर मुझे लगता है कि रेटिना डिस्प्ले में बहुत सारे पिक्सेल हैं, या यदि कैनवास जीएल पर सवारी नहीं कर रहा है, तो यह समझाएगा कि यह क्यों डगमगाता है। मुझे कैनवास विकास मॉडल पसंद है, अभी तक सीएसएस ट्रांसलेशन 3 डी विकल्प की कोशिश नहीं की है। विशेष रूप से मैंने GWT और gwt-g2d कैनवस रैपर (ऑप्टिमाइज़ेशन / ऑब्सफिकेशन) का उपयोग किया। http://www.photonjunky.com/shootout.html

Answer 5

मैं सुझाव दूंगा कि आपके नियंत्रण को html तत्वों जैसे कि menuऔर commandएक्सेसिबिलिटी कारणों से रखा जाए। सीएसएस के एक बिट का उपयोग करके आप एक कैनवास पर तत्वों को प्रदर्शित कर सकते हैं , और HTML के पूर्व-निर्मित कार्यक्षमता पर नहीं खो सकते हैं।

Answer 6

मुझे पता है कि यह एक पुराना सवाल है, लेकिन आज (मार्च 2013) हम बेहतर जानते हैं। मैं मामले में जवाब देने का फैसला किया जैसे किसी और ने यहाँ ठोकर खाई जैसे मैंने किया। मुझे अधिकांश अन्य उत्तरों से असहमत होना पड़ा है। वे शायद वेब ब्राउज़र विकास के लिए मान्य हैं, लेकिन मोबाइल के लिए नहीं। यह एक बड़ा अंतर बनाता है कि आप किस मार्ग को चुनते हैं (DOM या कैनवास एनीमेशन)। एंड्रॉइड वेबव्यू अपने आप में पूरी तरह से बेकार (धीमा, हकलाना) है, जो एंड्रॉइड गेम के विकास के लिए फोनगैप को बेकार बनाता है, जब तक कि आप हार्डवेयर त्वरण को लागू नहीं कर सकते हैं, जो वर्तमान में केवल कैनवास एनीमेशन और एक उपयुक्त रूपरेखा का उपयोग करके संभव है। अधिक जानकारी के लिए, यह उत्तर देखें ।

Answer 7

आप इसे एक लाख तरीके से कर सकते हैं। हालाँकि आप सबसे सहज महसूस करते हैं और आपके इंजीनियर सबसे अधिक आत्मविश्वास महसूस करते हैं।

यदि आप प्रेरणा या एक कोड उदाहरण की तलाश कर रहे हैं, तो यहां एक तरीका है जो मैं इसे करता हूं। मेरे पास एक फ़ंक्शन है जो एक बटन दबाए जाने तक बार-बार एक मेनू खींचता है। जब बटन दबाया जाता है, तो गेम लोड होता है और पुराने मेनू क्लिक इवेंट श्रोताओं को हटा दिया जाता है और नए गेम क्लिक इवेंट श्रोताओं को जोड़ा जाता है। मैं मेनू के पुराने ड्रॉ लूप को भी समाप्त करता हूं और एक नया गेम ड्रॉ लूप शुरू करता हूं। यहां कुछ चयनित स्निपेट दिए गए हैं, जो आपको इसका अंदाजा देते हैं:

Game.prototype.loadMenu = function() {
  var game = this;
  var can = this.canvas;

  // now we can use the mouse for the menu
  can.addEventListener('click', game.menuClickEvent, false);
  can.addEventListener('touchstart', game.menuClickEvent, false);

  // draw menu
  this.loop = setInterval(function() { game.drawMenu() }, 30);
};

Game.prototype.drawMenu = function() {
  // ... draw the menu
}

Game.prototype.loadLevel = function(levelstring) {
  // unload menu
  var can = this.canvas;
  var game = this;
  can.removeEventListener('click', game.menuClickEvent, false);
  can.removeEventListener('touchstart', game.menuClickEvent, false);

  if (this.loop) clearInterval(this.loop);

  // ... other level init stuff


  // now we can press keys for the game
  //can.addEventListener('click', game.gameClickEvent, false);
  can.addEventListener('touchstart', game.gameClickEvent, false);
  can.addEventListener('keydown', game.gameKeyDownEvent, false);

  this.loop = setInterval(function() { game.tick() }, 30);
}

// called from tick()
Game.prototype.draw = function(advanceFrame) {
  // ...
}

इस तरह मैं मेनू ड्राइंग और मेनू घटनाओं से गेम ड्राइंग और गेम इवेंट को अलग करने में सक्षम हूं। यह मुझे अपने मेनू में गेम / एनीमेशन तत्वों का उपयोग करने के लिए लेवे भी देता है, क्या मुझे उन्हें सुंदर दिखने के लिए बनाना चाहिए।