آموزش خروجی با cocoon.io

[shazde]

به نام خدا

سلام

با وجود آموزش های زیاد و رایگانی که دوستانی مثل آقای ابراهیمی و Vizmark# ساختن
خیلی ها هنوز مشکل دارن با خروجی گرفتن از کوکون آی او (cocoon.io)

چون خودم از کوکون استفاده میکنم و خروجی خوبی هست و خیلی ها مشکلاتی دارن باهاش تصمیم گرفتم کارهایی که خودم برای خروجی انجام میدم رو بصورت گام به گام توضیح بدم شاید کمکی باشه برای کسانی که میخوان خروجی بگیرین.

قبل از شروع بگم که من خودم از آموزش آقای ابراهیمی و Vizmark# استفاده کردم
هنوزم که هنوزه بعضی وقتا مشکلاتی با کوکون دارم ولی با خوندن متن ارور و بعضی وقت ها با تعویض اکانت یا موکول کردن خروجی برای چند ساعت بعد مشکل حل شده چون ممکنه بعضی وقتا سرورهای کوکون مشکل پیدا کنن یا حتی لینک پلاگین توی گیت هاب 

اول از همه پلاگین هایی که من استفاده کردم توی پروژه های مختلف و مشکلی نداشته با کوکون رو نام میبرم
( البته پلاگین هایی که نیاز به نصب دارن)

پلاگین بروزر یا همون مرورگر(البته فقط اونت دکمه بک گوشی و اکشن خروجش کار میکنه فکر کنم)
کوردوا vibration
کوردوا toast  (قبلا که تست میکردم درست بود ولی آخرین بار که تست کردم مشکل داشت لینک گیت هابش
و دیگه تست نکردم ببینم درست شده یا نه)
کوردوا والپیپر
پلاگین ابزار اندروید
پوشه
وان سیگنال
عدد
نیواد
مگنت
پلاگین ادموب ادز قبلا تست کردن یکی از بچه ها و کار کرده

تپسل بعضی از دوستان میگن استفاده کردیم و درست کار کرده 
ولی من که تست کردم کار نکرد 

همونطور که میدونید پلاگین هایی مثل تاچ _ لوکال استورج _ تکست _ کوکون کانواس پلاس _ آیودیو 
نیاز به نصب توی کوکون ندارن و توی فایل intelxdk.config.additions نشون داده نمیشن اینا

حالا خروجی از کانستراکت
اول از همه loader style از قسمت configuration Settings رو میزاریم روی ناتینگ

physics engine رو هم میزاریم روی گزینه دومی

این رو هم بگم که اندازه لی اوت رو من همیشه گذاشتم روی این ها
485 در 854 عمودی (افقی هم برعکس این میشه)
البته میتونید بین 480 تا 458 یا 850 تا 854 بزارید اندازه ها رو
ٌWindows Size رو هم بزارید روی اندازه ای که واسه لی اوت گذاشتید
از کجا Windows Size رو تغییر بدیم؟ یجای خالی از لی اوت رو کلیک کنید توی صفحه تنظیمات لی اوت پراپرتیس گزینه view  رو میزنیم و از بین بخش های موجود , Windows Size رو انتخاب میکنیم

بعد پلاگین cocoon canvasplus رو وارد پروژه میکنیم و کلیک میکنیم روی سربرگ File و بعد export project
توی ردیف دوم یه عکس 4 گوش  هست که زیرش نوشته cordova
اون رو انتخاب میکنیم تا یه صفحه برامون باز بشه 
توی کادر اول مسیر ذخیره فایل ها رو انتخاب می کنیم دیگه به چیزی دست نمیزنیم و گزینه next رو میزنیم
یه صفحه دیگه باز میشه بخش اول یعنی options  چهارتا گزینه داره 
گزینه اول رو فقط تیک میزنیم و اون سه تا تیک پایینی رو برمیداریم

بخش permissions
تیکی نیاز نیست بزنیم بخش سوم و چهارم رو هم دست نمیزنیم و گزینه export رو میزنیم
بسته به حجم پروژه زمان بیشتری میگیره تا کار تموم بشه
اگه زیاد طول کشید میریم یه چایی میریزیم برای خودمون و درحین تماشای اکسپورت شدن چای مینوشیم

بعد از تموم شدن export دوتا گزینه میاد که هرکدوم رو بزنیم فرق خاصی نمیکنه
ولی گزنیه اول رو میزنیم تا پوشه خروجی باز میشه
حالا توی پوشه ای که به ما داده 
اول اینو بگم پوشه ای به اسم www به ما نمیده
و لازممون هم نمیشه اصلا و نیازی نیست بسازیمش

ازفایل های توی پوشه سه تاشون مهمن برای ما 
اول فایل config.xml که باید حذفش کنیم بره

بعد فایل intelxdk.config.additions
که اگه از پلاگین خاصی استفاده کرده باشیم مثل پوشه یا پلاگین ویبره یا . . .
اون رو باید نگه داریم چون لازممون میشه اما از پوشه ی فعلی خارجش میکنیم و یجای دیگه مثل دستکتاپ میزاریمش

حالا میمونه فایل c2runtime.js که باید با یه برنامه ی ویرایش متن بازش کنیم
پیشنهاد من نوت پد++ هست برای این کار

وقتی بازش کردیم دکمه های ctr+f رو میزنیم و توی کادر باز شده این رو وارد میکنیم img_ و دکمه ی enter رو میزنیم
همون اول این خط رو میاره

کد:

img_["cocoonLazyLoad"] = true;
img_.onerror = function (e)
{
img_.c2error = true;
anyImageHadError = true;
if (console && console.error)
console.error("Error loading image '" + img_.src + "': ", e);

که ما باید یه ویرایش کوچیک انجام بدیم توش 
توی این خط 

کد:

img_["cocoonLazyLoad"] = true;

بجای true باید false رو بنویسیم 
فقط همین خط رو کار داشتیم و به چیز دیگه ای دست نمیزنیم 
تغییرات رو ذخیره میکنیم و فایل رو میبندیم
  
حالا پیشنهاد میکنم آخرین نسخه ی برنامه ی WinRAR ZIP archive  رو دانلود کنید
 
حالا همه فایل های باقی مونده توی پوشه رو انتخاب میکنیم ( crtl + A) رو میگیریم تا همه رو انتخاب کنه 
حالا کلیک راست میکنیم , گزینه هایی میاد برامون که چندتاش مربوط به برنامه ی WinRAR میشه
گزینه اولی نوشته add to archive...
این رو انتخاب میکنیم یه صفحه میاره برامون به تب های بالای صفحه کاری نداریم
توی همون تبی که باز شده یه گزینه هست به اسم Archive format
اگه تیک گزینه ی rar زده باشه و ما بزنیم روی ok
فایل ها فشرده میشن ولی وقتی توی کوکون آپلود کنیم میگه فرمت درست نیست و قبولش نمیکنه
پس ما میاییم تیک گزینه سومی یعنی zip رو میزنیم و ok
حالا این فایل فشرده رو توی کوکون آپلود میکنیم
کلیک میکنیم یا فایل رو با موس میکشیم روی گزینه ی Drop ZIP or Apload
بعد از آپلود شدن فایل یه بخش اضافه میشه به همون صفحه که مال پروژه ماست
اسمش هم hello cocoon هستش در ابتدا
حالا کلیک میکنیم روی آیکون چرخ دنده(تنظیمات) توی صفحه ای که باز میشه اول میریم سراغ تب SETTINGS
گزینه ی اول default هستش که Cocoon version رو اگه روی lasted نیست میزاریم lasted
 
Webview engine:
کلیک میکنیم روی Webview تا یه منوی کشویی باز بشه که 3 تا گزینه توش هست کلیک میکنیم روی canvas+

Bundle Id: پکیج نیم بازی رو وارد کنید مثال : ir.construct.game
با حروف کوچیک مینویسیم
 
Version: ورژن بازیمون رو وارد میکنیم . مثلا 1.0.0
 
Name: اسم بازی(فارسی یا انگلیسی)
 
Orientation: تعیین افقی یا عمودی بودن یا هردو (بسته به نوع ساخت بازیمون داره دیگه)
 
Fullscreen: میزاریم روی yes

گزینه ی بعدی رو کاری نداریم تنظیمات وارد شده رو ذخیره میکنیم , پایین تنظیمات یه کادر زرد رنگ اومده که نوشته
You have unsaved changes باید روی آیکون اولی که کنارشه کلیک کنیم تا ذخیره بشه تنظیمات

حالا میریم سر برگ android و توی مربع کنارش کلیک میکنیم تا تیک زده بشه و همون کارهای که بالا انجام دادیم رو انجام میدیم دوباره
اینجا چند گزینه بیشتر داره نسبت به قبلی 
توی کادر Version Code یه عدد وارد میکنیم و با هربار آپدیت کردن بازی اون عدد رو بیشتر میکنیم
مثلا بار اول 1 باشه آپدیت بعدی 2 بشه و . . .

گزینه های پایینتر از Fullscreen رو کاری نداریم و دوباره تنظیمات رو ذخیره میکنیم

میریم تب بعدی یعنی plugins 
پلاگین هایی که توی اون فایل intelxdk.config.additions هست رو باید اینجا وارد کنیم
مثلا پلاگین پوشه این شکلی باید نصب بشه
قسمت custom رو کلیک میکنیم یه صفحه میاد که سه تا کادر داره توی کادر اول این رو وارد میکنیم
https://github.com/miladesign/pushe-cordova-plugin
و به آخر خط این رو اضافه میکنیم > git. و بعد گزینه instal رو میزنیم تا نصب بشه

اگه باز هم توی فایل intelxdk.config.additions آدرسی به این شکل مال پلاگین دیگه ای باشه باید همینطوری نصبش کنیم
بعضی پلاگین ها مثل پلاگین درون پرداخت جدید آقا میلاد اگه خودش نصب نشه
میتونیم این شکلی نصبش کنیم , میریم قسمت search و markets رو تایپ میکنیم تا پلاگین رو پیدا کنه برامون
پیدا که شد کلیک میکنیم روش و گزینه instal رو میزنیم تا نصب بشه

بعضی پلاگین ها بعد از نصب برای اینکه درست کار بکنن نیاز دارن که پارامتر هایی اضافه کنیم بهشون
مثلا پلاگین عدد یا پوشه یا همین درون پرداخت آقا میلاد
 البته توضیحی نمیدم در این مورد چون توی قسمت راهنمای این پلاگین ها خود آقا میلاد توضیح داده که چه پارامتر هایی باید وارد کنیم

بعد از نصب پلاگین ها ذخیره میکنیم تغییرات رو و میریم تب بعدی.

Icon: کار خاصی نداره فقط باید یه آیکون در اندازه های 512_512 یا 1024 _ 1024 آپلود و ذخیره کنیم.

تب بعدی یعنی splash میتونیم یه اسپلش وارد کنیم تا بعد از اسپلش کوکون اسپلش ما نشون داده بشه یا هم میتونیم وارد نکنیم و از کنارش رد بشیم.

کارمون تقریبا تمومه دیگه و با تب بعدی کاری نداریم و دستش نمیزنیم , میریم پایین صفحه جایی که نوشته SIGNING
اگه کی استورمون رو قبلا وارد کوکون کرده باشیم کافیه فقط کلیک کنیم روی android و کی استورمون رو انتخاب کنیم
و بعد بریم بالای صفحه و آیکون چکش(compile) رو بزنیم تا خروجی گرفتن شروع بشه
 وقتی اون آیکون اندروید روی آبی موند و زیرش سایه انداخت یعنی خروجی آماده ی دانلود شده
کلیک میکنیم روش تا دانلود شروع بشه

اگه کی استور رو انتخاب کرده باشیم بجای 4 تا فایل 2 تا فایل میده که هم ساین شدن و هم الاین
یعنی بعد از دانلود و تست , آماده ی آپلود شدن توی مارکت ها هستن.

اگه آیکون اندروید نارنجی بشه یعنی جایی مشکلی بوجود اومده 
کلیک میکنیم روش و متن ارور رو میخونیم
درسته متن طولانی هست ولی نیاز به ترس یا نگرانی نیست فقط کافیه با دقت خط های اولی رو بخونیم تا بفهمیم به چی یا به کدوم پلاگین ارور گرفته

اگه به پلاگینی ارور گرفته باشه اسمش رو مینویسه و میتونیم  مشکلش رو حل کنیم مثلا پلاگین بروزر نباید از بعضی اونت هاش و بعضی اکشن هاش استفاده کنیم
 مثلا اونت های دکمه بک گوشی و اکشن خروج رو میشه استفاده کرد و مشکلی نداره
  
امیدوارم این آموزش بدرد بخور باشه

اینها دقیقا کارایی هست که خودم موقع خروجی گرفتن پروژه هام انجام میدم و خداروشکر همیشه خروجیم رو
گرفتم , ممکنه بعضی وقتا ارور داده باشه ولی حل شده خداروشکر
 
موفق باشید
 

[shaygaaan]

سلام
واقعا عالی بود ، خسته نباشید.

[keykavoos]

سلام
ممنون
خلاصه نویسی بسیار خوبی بود

[morti]

من همه این کارها رو به ترتیب انجام دادم ولی بازم صفحه سیاه میشه و اروری بهم نمیده هنگام کام‍‍بایل
خروجی وب ویو هم که بهم میده نصب نمیشه اصلا این فایل بروژم هست میشه یکی ببینه چه مشکلی داره باهاش؟
https://static3.scirra.net/uploads/artic...layer.capx

[shazde]

سلام
1_ من گفتم که باید پلاگین کوکون کانواس پلاس رو هم اضافه کنید که شما اصلا اضافه نکردید
2_  شما یه نگاه به پلاگین هایی که استفاده کردید بندازید

به جز آرایه هیچکدوم با کوکون سازگان نیستن پس خروجی سیاه میشه
شما میتونید خروجی اینتل بگیرید
موفق باشید

[helpick]

سلام من خروجی میگیرم ، ولی روی گوشی نصب نمیشه مشکل پکیج میده

[shazde]

سلام یه عکس از ارور بزارین

[morti]

میشه لطفا اموزش خروجی اینتل رو هم یک نفر زحمت بکشه بزاره برامون؟ برای من اینتل هنگام خروجی یه پکیج میده که نمیدونم باهاش باید چیکار بکنم و فایل ای پی کا نمیده!

[shazde]

سلام
اینطور که شنیدم 
اینتل چند وقته خرابه

[morti]

اگر کسی مثل من خواست از پلاگین هایی که مثلا من استفاده کردم استفاده بکنه از چه خروجی میتونه خروجی بگیره؟

 کوکون که نمیشه اینتل هم که خرابه پس چیکار کنیم ما؟!!