এইচটিএমএল 5 গেম (ক্যানভাস) - ইউআই কৌশল?


23

আমি ফোনগ্যাপের সাহায্যে মোবাইলের জন্য জাভাস্ক্রিপ্ট / এইচটিএমএল 5 গেম (ক্যানভাস ব্যবহার করে) তৈরি করতে চলেছি in আমি বর্তমানে ইউআই এবং প্লেিং বোর্ড কীভাবে তৈরি করা উচিত এবং তাদের কীভাবে ইন্টারঅ্যাক্ট করা উচিত তা ডিজাইনের চেষ্টা করছি তবে সর্বোত্তম সমাধানটি কী তা আমি নিশ্চিত নই। আমি যা ভাবতে পারি তা এখানে -

নিয়মিত DOM অবজেক্ট ব্যবহার করে ক্যানভাসের বাইরের ইউআই এর অংশগুলি ডিলআইমেজ এবং ফিলটেক্সট এর মতো জিনিসগুলি ব্যবহার করে ডান ক্যানভাসে ইউআই তৈরি করুন এবং তারপরে যখন ইউআই উপাদানগুলি প্লেিং বোর্ডের ক্যানভাসকে ওভারল্যাপ করতে হবে তখন ক্যানভাসের উপর একটি ডিভ ভাসাবেন। আমি গেম ইউআই তৈরির জন্য অন্য কোন সম্ভাব্য কৌশলগুলি ব্যবহার করতে পারি যা আমি ভেবে দেখিনি? এছাড়াও, এর মধ্যে কোনটি "স্ট্যান্ডার্ড" উপায় হিসাবে বিবেচিত হবে (আমি জানি HTML5 গেমগুলি খুব জনপ্রিয় নয় তাই সম্ভবত এখনও কোনও "মানক" উপায় নেই)? এবং অবশেষে, আপনি কোন উপায়ে প্রস্তাব / ব্যবহার করবেন?

অগ্রিম ধন্যবাদ!


মনে রাখবেন যে আইএন তে এখনও ক্যানভাস সমর্থিত নয় (আইই 9 অভিযোগ করবে) ... যাতে এটি আপনার গেমের জন্য বিশাল বাজার ভাগ সরিয়ে দেয়। এখানে একটি জাভাস্ক্রিপ্ট প্যাচ রয়েছে যা এটি আইইতে কাজ করার চেষ্টা করে তবে এটি ভালভাবে কাজ করতে পারে না hell

1
@ অ্যাডাম - ফ্ল্যাশক্যানভাস দেখুন: ফ্ল্যাশক্যানভাস নেট
এহসানুল

আমি গুই হিসাবে ডোম উপাদানগুলি ব্যবহার করি, একটি উইন্ডো ক্যানভাস উপাদান (প্রকৃত খেলা) এর সাথে যুক্ত একটি উইন্ডো সহ "উইন্ডোজ" হিসাবে বহুতল ভাসমান ডিভগুলি ব্যবহার করি। এবং সর্বদা এই বিকল্পটি রয়েছে: বিকাশকারী.মোজিলা.আর.ইন.ইউএস
ডকস

উত্তর:


18

উভয় সমাধান (আপনার ক্যানভাস ভিএস উপর আঁকা traditionalতিহ্যবাহী এইচটিএমএল / সিএসএস) সম্পূর্ণ বৈধ এবং ঠিক ঠিক কাজ করবে। কিছু বিষয় বিবেচনা করুন:

  • আপনি যদি ইতিমধ্যে একটি ক্যানভাস-ভিত্তিক লাইব্রেরি ব্যবহার করছেন তবে আপনার কোডটি ইউআইয়ের জন্য অতিরিক্ত (ডিওএম-ভিত্তিক) পদ্ধতি না রেখে ক্যানভাস ব্যবহার চালিয়ে আরও পরিষ্কার / আরও সংগঠিত হতে পারে।
  • যদি আপনার UI অত্যন্ত পাঠ্য-ভারী হয় (ডায়লগ ইত্যাদি সহ) তবে এটি HTML / CSS এর মাধ্যমে প্রয়োগ করা সহজতর হতে পারে implement উদাহরণস্বরূপ, একটি ডিওএম উপাদান (মোড়ানো এবং অনুচ্ছেদের ব্যবধানের মতো স্টাফ সহ) এবং পাঠানো তুলনামূলকভাবে ক্যানভাসে প্রয়োগ করা কঠিন text
  • আপনি যে লাইব্রেরিটি ব্যবহার করছেন তার উপর নির্ভর করে আপনার ক্যানভাসের চেয়ে DOM উপাদানগুলিতে ক্লিক হ্যান্ডলিং প্রয়োগ করা আরও সহজ হতে পারে। উদাহরণস্বরূপ, যদি আপনি একটি "ওকে" বোতামে একটি ক্লিক সনাক্ত করতে চান তবে এটি এইচটিএমএল / জেএস বিশ্বের একটি তুচ্ছ কাজ। তবে ক্যানভাসে আপনাকে অন্য কোনও উপাদানটির ক্লিক শুনতে হবে এবং ক্লিকটি কোথায় হয়েছে তা দেখতে এর স্থানাঙ্কগুলি পরীক্ষা করে দেখতে হবে।
  • পাঠ্যযুক্ত DOM উপাদান ব্যবহার করার সময় কিছু ব্যবহারকারীর এজেন্ট (বিশেষত মোবাইল ডিভাইস) কৃপণ হতে পারে। উদাহরণস্বরূপ, মোবাইল সাফারি অনুলিপি / পেস্ট করার সরঞ্জামগুলির সাথে একটি মডেল পপ আপ করতে পারে। এই আচরণ রোধ করা কঠিন হতে পারে এবং সম্ভবত ক্যানভাসের জমিতে আরও সহজ হতে পারে।

এর কিছু বিষয়গত হবে; আমি জানি এমন বিকাশকারী সর্বদা ক্যানভাস ব্যবহার পছন্দ করেন যেহেতু তিনি ডমকে কেবল কুরুচিপূর্ণ এবং ভার্বোস হিসাবে খুঁজে পান। যেহেতু উভয়ই সমাধানটি সূক্ষ্মভাবে কাজ করবে, তাই আমি আপনার অ্যাপ্লিকেশনটিতে একটি সাধারণ একক স্ক্রিন বেছে নেব, দ্রুত উভয় পদ্ধতি ব্যবহার করে এটি আলাদাভাবে বিকাশ করব এবং কোনটি সহজ / আরও ভাল বলে মনে হচ্ছে তা দেখুন।

ভাগ্য সুপ্রসন্ন হোক!


আপনার উত্তর দেওয়ার জন্য ধন্যবাদ! খুব ভাল পয়েন্ট। আমি এখনই নিজের ইঞ্জিনটি তৈরি করছি। এটি ক্যানভাস ব্যবহার করে শুরু হয়েছে তবে CSS3 / ওয়েবকিট স্টাফ পরীক্ষা করার জন্য এটি কিছুটা পরিবর্তন করতে চলেছে। আমি নিজের তৈরি করার একমাত্র কারণ হ'ল গেমটি 'রিয়েল' ইঞ্জিনের জন্য খুব 'সাধারণ'। আমাদের এমনকি সত্যিকারের একটি প্রধান গেম লুপ নেই। অ্যানিমেশনের জন্য এমনকি এটির একমাত্র কারণ, তবে এটি ঘটে যায় এমনটি বিবেচনা করে আমরা সম্ভবত প্রয়োজন হিসাবে কেবল টাইমারগুলি শুরু / বন্ধ করতে পারি :)
জেসন এল।

5

আমি আমার ক্যানভাস মিথস্ক্রিয়া জন্য ইজেলজেস ব্যবহার করছি।

এটি বেশ ভাল এবং শক্ত নকশার সুবিধার্থে। মূল বৈশিষ্ট্যগুলির মধ্যে একটি যা আমাকে এটি বেছে নিয়েছিল তা হ'ল আপনার ক্যানভাস অবজেক্ট এবং ডোম উপাদানগুলির অবস্থান সিঙ্ক করার সুবিধা।

এটি সিএসএস স্পীচ বুদবুদ এবং হুড ফ্রেম এবং এই জাতীয় জিনিসটির মতো স্থিতিশীল ইউআই উপাদানগুলি করা সহজ করে তোলে।

ব্রাউজারগুলির জন্য এটির সুবিধাটি হ'ল আপনি সমৃদ্ধ ক্যানভাস পান তবে পারফরম্যান্স ধরে রাখতে আপনি ছোট এবং স্থির জিনিসগুলি ডোমের কাছে বন্ধ করে দিতে পারেন।


4

মোবাইল প্ল্যাটফর্মগুলিতে ক্যানভাসটি ধীর গতিতে কমপক্ষে মোবাইল সাফারি, সুতরাং আপনি সেগুলির উপর সিএসএস ভিত্তিক পজিশনিং ব্যবহার করতে চান। বিশেষত "ট্রান্সলেটেড 3 ডি" ব্যবহার করুন যা বস্তুর হার্ডওয়্যার ত্বরণী উপস্থাপনা চালু করবে।

ক্যানভাসের জন্য CAAT গ্রন্থাগারটি দেখুন, এটি দ্রুত এবং আপনি সিএসএস ব্যাকড "অভিনেতা" ব্যবহার করতে পারেন এবং গেমটির যুক্তি পরিবর্তন করতে পারবেন না।

আমি লিঙ্কগুলি এখনও পোস্ট করতে পারি না তবে এখানে কয়েকটি সিউডো লিঙ্ক রয়েছে http://labs.hyperandroid.com/animation


আমি মনে করি CAAT এর পৃষ্ঠায় রেপো লিঙ্কটি পুরানোটির দিকে ইঙ্গিত করছে তাই পরিবর্তে আপনি এটি ব্যবহার করছেন তা নিশ্চিত হয়ে নিন! রেপো: github.com/hyperandroid/CAAT
onedayitwillmake

(দুঃখিত, আমি বর্তমানে প্রতি পোস্টে কেবল একটি লিঙ্ক যুক্ত করতে পারি) এখানে আমি তৈরি একটি ডেমো রয়েছে যার মধ্যে CAAT- এর
onayayitwillmake

লিঙ্কগুলির জন্য ধন্যবাদ, আমি ডিফ করব। এটা দেখ. আমি শুনেছি ক্যানভাসের ধড়ফড়ানি ধীর হয়ে আসছে তবে আমি নিজেই নিজেকে জিনিসগুলি দেখতে পাচ্ছি :) আমার আরও খেয়াল করা উচিত যে আমি যে গেমটি তৈরি করছি তা অ্যানিমেশনগুলিতে খুব হালকা। একবারে এক মিনিটের জন্য প্রতি 5-10 সেকেন্ডের একবারে এবং একবারে একবারে দু'বারের বেশি চলমান নয়। পাগল কিছু না। এছাড়াও, যাচাই করার জন্য, আপনি কি ক্যানভাসটি একেবারেই ব্যবহার না করে সিএসএস / অনুবাদ 3 ডি দিয়ে সাধারণ পুরানো ডিওএম অবজেক্ট ব্যবহার করার পরামর্শ দিচ্ছেন?
জেসন এল।

সত্যি কথা বলতে কি, আমি আপনার নির্দিষ্ট দৃশ্যের জন্য বলতে পারি না বা করব না। তবে আপনি যদি মোবাইল-সাফারি নির্দিষ্ট করে লক্ষ্য করতে চান তবে ইমো হ্যাঁ আপনি ডিভিএস সহ সিএসএস ব্যবহার করতে চান। আমার অভিজ্ঞতা থেকে ক্যানভাস পুনরায় আঁকানোর তুলনায় এটি খুব দ্রুত। আমি সহজেই 45 ইমেজ ভিত্তিক স্প্রিটগুলি 30FPS এ ঘোরাফেরা করে 'ট্রান্সলেটেড 3 ডি' ব্যবহার করে সেগুলিতে স্থানান্তরিত করতে সক্ষম হয়েছি। আপনি 'ট্রান্সফর্ম 3 ডি' দিয়ে সরানোর পরিকল্পনা করছেন এমন বস্তুর জন্য সিএসএসে এটি নিশ্চিত করে রাখুন, অন্যথায় ওয়েবকিট সেই স্থানগুলিকে স্থাপনের পরিবর্তে নির্দিষ্ট করা জায়গায় সঞ্চারিত করবে। -webkit- রূপান্তর: রূপান্তর 3d 0s রৈখিক;
onedayitwillmake

2

আইফোন 4 এ ক্যানভাসের মন্থরতা সম্পর্কে একমত হতে হবে 4. খুব নিশ্চিত যে সাফারি ক্যানভাস জিএল সমর্থন করছে না। আমার চিজি গেমটি আইফোন 3 জি এবং অ্যান্ড্রয়েডে দ্রুত চলে তবে আইফোন 4 এ আমি মনে করি রেটিনা ডিসপ্লেতে অনেক বেশি পিক্সেল রয়েছে, বা যদি ক্যানভাস জিএল তে চড়ছে না, তবে এটি কেন টানছে তা ব্যাখ্যা করবে। আমি ক্যানভাস বিকাশের মডেলটি পছন্দ করি, এখনও CSS অনুবাদ 3d বিকল্পটি চেষ্টা করে দেখিনি। বিশেষত আমি GWT এবং gwt-g2d ক্যানভাস র‌্যাপার (অপ্টিমাইজেশন / অবফেসেশন) ব্যবহার করেছি। http://www.photonjunky.com/shootout.html


1

আমি যেমন HTML উপাদানগুলি হিসাবে আপনার নিয়ন্ত্রণগুলি পালন সুপারিশ করবে menuএবং commandঅভিগম্যতা কারণে। কিছুটা সিএসএস ব্যবহার করে আপনি ক্যানভাসের মাধ্যমে উপাদানগুলি প্রদর্শন করতে পারেন এবং এইচটিএমএলের প্রাক-বিল্ট কার্যকারিতা হারাতে পারেন না।


1

আমি জানি এটি একটি পুরানো প্রশ্ন, তবে আজ (মার্চ 2013) আমরা আরও ভাল করে জানি। আমার মতো এখানে অন্য কেউ হোঁচট খেয়ে গেলে আমি উত্তর দেওয়ার সিদ্ধান্ত নিয়েছি। অন্যান্য উত্তরগুলির সাথে আমার বেশিরভাগের সাথে একমত হতে হবে। এগুলি সম্ভবত ওয়েব ব্রাউজার বিকাশের জন্য বৈধ, তবে মোবাইলের জন্য নয়। আপনি কোন রাস্তাটি বেছে নিয়েছেন তা (ডিওএম বা ক্যানভাস অ্যানিমেশন) এতে দুর্দান্ত পার্থক্য হয়। অ্যান্ড্রয়েড ওয়েবভিউ স্বয়ংক্রিয়ভাবে সম্পূর্ণ অকেজো (ধীর, তোড়জোড়), যা আপনি অ্যান্ড্রয়েড গেম বিকাশের জন্য ফোনগ্যাপকে অকেজো করে তোলে, যদি না আপনি হার্ডওয়্যার এক্সিলারেশন প্রয়োগ করতে পারেন, যা বর্তমানে কেবল ক্যানভাস অ্যানিমেশন এবং উপযুক্ত কাঠামো ব্যবহার করেই সম্ভব। আরও তথ্যের জন্য, এই উত্তর দেখুন


0

আপনি এটি মিলিয়ন উপায়ে করতে পারেন। তবে আপনি সবচেয়ে স্বাচ্ছন্দ্য বোধ করেন এবং আপনার প্রকৌশলীরা সবচেয়ে আত্মবিশ্বাসী বোধ করেন।

আপনি যদি অনুপ্রেরণা বা কোডের উদাহরণ সন্ধান করেন তবে আমি এটি করার এক উপায় এখানে's আমার একটি ফাংশন রয়েছে যা একটি বোতাম টিপানো না হওয়া পর্যন্ত বারবার মেনু আঁকে। বোতামটি টিপলে, গেম লোড হয় এবং পুরানো মেনু ক্লিক ইভেন্ট শ্রোতাদের সরানো হয় এবং নতুন গেম ক্লিক ইভেন্ট শ্রোতাদের যুক্ত করা হয়। আমি মেনুটির পুরানো ড্র লুপটিও শেষ করে একটি নতুন গেম ড্র লুপ শুরু করি। কীভাবে এটি সম্পন্ন হয়েছে সে সম্পর্কে আপনাকে ধারণা দেওয়ার জন্য এখানে কয়েকটি নির্বাচিত স্নিপেটগুলি রয়েছে:

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) {
  // ...
}

এইভাবে আমি গেম অঙ্কন এবং গেম ইভেন্টগুলি মেনু অঙ্কন এবং মেনু ইভেন্টগুলি থেকে পৃথক করতে সক্ষম। এটি আমার মেনুগুলিতে গেম / অ্যানিমেশন উপাদানগুলি ব্যবহার করার জন্য আমাকে এলোমেলো করে দেয় আমি তাদের সত্যিকারের চেহারা সুন্দর করে তুলতে চাই।

আমাদের সাইট ব্যবহার করে, আপনি স্বীকার করেছেন যে আপনি আমাদের কুকি নীতি এবং গোপনীয়তা নীতিটি পড়েছেন এবং বুঝতে পেরেছেন ।
Licensed under cc by-sa 3.0 with attribution required.