ว่าด้วยเรื่องของ Label [Ngui] by

30
Jun
0

คราวก่อนเราลองทำปุ่มในเกมกันแล้ว หากขาดส่วนข้อความไปก็กระไรอยู่ เรามาเริ่มกันเลยดีกว่า
1.เปิดส่วน Font maker แล้วโยนไฟล์ฟอนต์ที่เราจะใช้ไว้ในโปรเจ็คโลด ตรง Type ให้เลือกแบบ Dynamic สำหรับคนที่ไม่ได้ทำฟอนต์เองนะฮะ เพราะแบบ Bitmap จะให้เราใส่รูปฟอนต์เอา
1
2.เลือกฟอนต์ที่จะใช้ กำหนดขนาดฟอนต์ตั้งต้น เลือกรูปแบบฟอนต์ นอร์มอล อิตาลิค โบลต์ ว่าไปๆ กดcreateเล้ย
2
3.กดเลือกฟอนต์ที่เราพึ่งสร้างแล้วกดสร้าง Image button ตามปกติ จะเห็นว่ามี Label ติดสอยห้อยตามมาด้วย //จริงๆจะสร้างเป็น Label แยกแล้วโยนใส่ ทีหลังก็ได้
2.5
4.มาดูส่วน Inspector ของ Label ที่เราสร้างขึ้นดีกว่า ว่าแก้ไขอะไรได้บ้าง อย่างแรกเลย ขนาดของข้อความเราต้องเพิ่ม-ลดด้วยตัวเองนะ โดยที่ความชัดของฟอนต์จะขึ้นอยู่ที่ตอนเราสร้าง ว่ากำหนดไว้เท่าไหร่ ข้อความที่ใช้สามารถแก้ไขได้ตลอด
Max W,H,L ว่าง่ายๆก็คือกำหนดกรอบของ Text ที่เราสร้างนั่นแหละ อยากให้ตัวอักษรเบียดกันขนาดไหนก็ปรับตรงนี้เลย
Effect-เอาไว้ใส่ลูกเล่นง่ายๆที่ฟอนต์
Color tint-เอาไว้ปรับสีฟอนต์
3
5.จะเห็นว่าฟอนต์ที่เราสร้างดูไม่คมชัดเลย อยากปรับให้ชัดก็ไปที่ Inspector ของ Font ที่เราสร้าง แล้วปรับไซส์มันซะ จะเห็นว่าฟอนต์จะชัดขึ้นแต่ขนาดจะเท่าเดิม
4

AsyncTask คืออะไร? by

30
Jun
0

AsyncTask นั้นเป็น abstract class ที่ทาง Android นั้นจัดเตรียมมาให้เราเพื่อทำการประมวลผล หรือทำงานเป็น background โดยไม่ต้องไปยุ่งกับตัว UI หลัก อย่างเช่น กรณีต้องการดึง content จากเว็บไซต์เว็บหนึ่ง เพื่อมาแสดงบนแอพพลิเคชันของเรา เราก็จะใช้ AsyncTask ช่วยในการคำนวณ ประมวลผล โดยเมื่อ AsyncTask ทำงานอยู่ มันจะไม่กระทบกับหน้าจอ UI ของเรา

 private class DownloadFilesTask extends AsyncTask<URL, Integer, Long> {
     protected Long doInBackground(URL... urls) {
         int count = urls.length;
         long totalSize = 0;
         for (int i = 0; i < count; i++) {
             totalSize += Downloader.downloadFile(urls[i]);
             publishProgress((int) ((i / (float) count) * 100));
             // Escape early if cancel() is called
             if (isCancelled()) break;
         }
         return totalSize;
     }

     protected void onProgressUpdate(Integer... progress) {
         setProgressPercent(progress[0]);
     }

     protected void onPostExecute(Long result) {
         showDialog("Downloaded " + result + " bytes");
     }
 }

การเรียกใช้งานก็แสนง้ายครับ new DownloadFilesTask().execute(url1, url2, url3);

The 4 steps

หลังจากเราทำการ executed แล้ว task จะทำงาน 4 steps ตามนี้ครับ

1. onPreExecute() <<<< อันนี้เอาไว้ invoked UI ก่อนที่จะเริ่ม executed ส่วนมากก็เอาไว้ setup ui ต่าง ex progressbar

2.doInBackground(Params…) <<<<< หลังจากที่  onPreExecute() ทำงานเสร็จก็จะมาทำงานตรงนี้และครับ ตรงนี้เอาไว้ติดต่อกับ internet ครับ จะทำจนกว่าจะเสร้จถ้าเราทำการ load file ครับ

3.onProgressUpdate(Progress…) <<<< หากมีการเรียกใช้งานก็จะเอาไว้ทำการ update ค่าต่างๆครับ ว่า load ได้ขนาดไหนแล้ว กี่ byte หรือกี่ % แล้ว อันนี้ต้องเขียน code ไว้ตรงนี้นะครับ

4.onPostExecute(Result) <<<< หลังจาก doInBackground(Params…) ทำงานเสร็จ onPostExecute(Result) ก็จะถูกเรียกครับ คือหลังจาก เรา load file เสร็จแล้วจะให้ทำอะไรต่อนั้นและครับ

 

 

ถามว่าจำเป็นยังไงก็บอกได้เลยครับว่าจำเป็นมาก เพราะถ้าเราทำงานติดต่อผ่าน internet แล้วละก็ไม่ทำงานผ่าน

thread or asynctask แล้วละก็ GC ของ android จะมาเก้บ activity ของเราครับ แต่ถ้าผมจำไม่ผิดตั้งแต่มีการ up api 4.0 เค้าบังคับว่าต้องใช้งานแล้วครับ วันนี้พอก่อนแล้วกันครับ วันหลังมาต่อเรื่องอื่นกัน

Push Notification on IOS by

30
Jun
0

วันนี้เราจะมานำเสนอเกี่ยวกับการส่ง Push Notification ให้กับมือถือที่ใช้ระบบปฏิบัติการ IOS กันนะครับ

ก่อนอื่นมาดูขั้นตอนการทำงานของระบบ Push Notification กันก่อนนะครับ

เราจะมาพูดกันถึง Code ฝั่ง Server นะครับ ในที่นี้เราจะใช้ PHP นะครับ

$device_token = ’491956db82a4677a610d11e0574ed42efa686c0d3b5a7900b4eec810a2d42c97′;

$is_dev = true; // true or false

if($is_dev){

// Put your private key’s passphrase here:

$passphrase = ‘passpharse’;

$key_path = base_path().’/key/development.pem’;

$host = ‘ssl://gateway.sandbox.push.apple.com’;

$port = ’2195′;

}else{

// Put your private key’s passphrase here:

$passphrase = ‘passpharse’;

$key_path = base_path().’/key/production.pem’;

$host = ‘ssl://gateway.push.apple.com’;

$port = ’2195′;

}

$ctx = stream_context_create();

stream_context_set_option($ctx, ‘ssl’, ‘local_cert’, $key_path);

stream_context_set_option($ctx, ‘ssl’, ‘passphrase’, $passphrase);

// Open a connection to the APNS server

$fp = stream_socket_client($host.’:’.$port, $err, $errstr, 60, STREAM_CLIENT_CONNECT|STREAM_CLIENT_PERSISTENT, $ctx);

if($fp){

// Encode the payload as JSON

$payload = json_encode(array(

‘aps’ => array(

‘alert’ => ‘This is a book.’

),

‘data’ => array(1,2,3)

)); // เราสามารถส่งข้อมูลเพิ่มเติมไปได้พร้อมๆกับ Payload ครับ

// Build the binary notification

$binary = chr(0).pack(‘n’, 32).pack(‘H*’, $device_token).pack(‘n’, strlen($payload)).$payload;

// Send it to the server

fwrite($fp, $binary, strlen($binary));

}

// Close the connection to the server

@socket_close($fp);

@fclose($fp);

credit: http://www.raywenderlich.com/32960/apple-push-notification-services-in-ios-6-tutorial-part-1

การแก้ไข Prefab หลายๆ ตัวพร้อมกัน by

30
Jun
0

Prefab ใน Unity แล้วมันคือการสร้างวัตถุต้นแบบขึ้นมาหนึ่งชิ้นแล้วทำให้เราสามารถ clone วัตถุต้นแบบชิ้นนั้นออกมาหลายๆ อันได้ ทำให้สามารถทำงานได้สะดวกขึ้น ซึ่งจะคล้ายๆ Symbol ของ Flash แต่ว่ามันก็มีปัญหาที่ยุ่งยากคาใจอยู่อย่างคือ หากต้องมีการแก้ไขวัตถุต้นฉบับขึ้นมาแล้วเราคาดหวังว่า วัตถุที่ Clone ไปนั้นจะถูกแก้ไขตามด้วยนั้นก็ต้องพบกับความผิดหวังเมื่อมันไม่ยอมแก้ไขให้ – -” ด้วยเหตุนี้เลยมีคนทำ Plugin ขึ้นมาตัวนึงชื่อว่า Prefab Evolution เข้ามาแก้ปัญหาตรงจุดนี้ได้ โหลดได้ตาม link ด้านล่าง

https://www.assetstore.unity3d.com/en/#!/content/17557 ($50)
หรือใช้ตัวทดลองใช้ฟรีได้ที่

https://www.dropbox.com/s/vegygvjb60v2m33/PrefabEvolution_Trial.unitypackage

(เป็น Demo ที่จำกัดความสามารถที่ 1000 asset ต่อ 1 project)

โหลดแล้วก็ลองกันเลย

prefab1

 

 

 

 

1. ผมลองสร้าง GameObject ชื่อ ContainerPrefab มาใส่รูปเข้าไปสองชิ้น จากนั้นให้ drag ContainerPrefab ลงไปที่ Project เพื่อสร้าง Prefab

prefab2

 

2. จะได้ prefab ดังรูป จากนั้นคลิกที่ ContainerPrefab ใน Hierachy ตามรูปข้อหนึ่ง

prefab3

 

3. ดูที่ Inspector คลิก Allow this prefab to be nested

prefab4

 

4. ทีนี้ลาก Prefab ลงไปที่ Scene อีกตัวตั้งชื่อเป็น ContainerPrefab2 สังเกตเห็นว่าจะมี Cubic สีเขียวโผล่มา แสดงว่า Plugin เริ่มทำงานได้ถูกต้องแล้ว

prefab5

 

5. ทดสอบย่อรูปใน PrefabContainer ลงตามรูป

prefab6

 

6. Apply to prefab ที่ inspector

prefab7

 

7. รูปที่ prefabContainer2 ก็จะหดตามอัตโนมัติโดยไม่ต้องทำอะไรเพิ่ม

เพิ่มเติมว่า Plugin ตัวนี้ทำงานได้ค่อนข้างครอบคลุม แม้แต่การสร้าง Prefab ซ้อน Prefab (Nested Prefab) แล้วแก้ prefab ที่ไส้ในก็ยังสามารถทำงานได้ถูกต้องอยู่ จึงเป็น Plugin ที่น่าสนใจมากตัวนึง ข้อเสียมีแค่ข้อเดียวคือใช้กับ Project ที่สร้างทุกอย่างเสร็จแล้วไม่ได้ เพราะต้องสร้าง prefab หลังจาก “Allow this prefab to be nested” เท่านั้นจึงจะสามารถแก้ไขแล้ว apply ไปโดนตัวอื่นๆ ได้

มาทำ Interaction Animation Unity กันเถอะ!! by

30
Jun
0

คราวนี้เราจะมาทำ Animation ที่ Interaction กับแผงควบคุมอย่าง Keyboard อย่างง่ายๆ กัน โดยคราวนี้เราจะใช้แต่ฟังก์ชั่นของ Unity เองล้วนๆ

ก่อนอื่น เริ่มจากหา Sprite Sheet ที่แจกให้ว่อนกันในเนตก่อนเลย~

1

เค้าไปเจอ Rockman X มาแหละ หุหุหุ

ต่อไป สร้าง GameObject ขึ้นมาตัวนึง เพื่อที่จะรับหน้าที่เป็น Rockman ของเรา จากนั้นเลือกที่ Sprite Sheet ที่จะใช้ มองหาเมนูทางขวามือที่เขียนว่า Sprite Mode โดยเจ้าตัวนี้แหละ จะเอาไว้เปลี่ยนให้กลายเป็น Sprite ชิ้นเล็กๆ ได้

2

 

จากนั้นกดปุ่ม Sprite Editor แถวๆ นั้น เพื่อที่จะเริ่มตัด Sprite กัน โดยที่แบ่งได้ 2 แบ คือ Automatic และแบบ Grid ซึ่ง Rockman ของเรานั้นจะใช้แบบ Automatic เพราะเรียงขนาด Grid ไม่ได้แบบที่ต้องการ ซึ่งผลก็ออกมาดูดีใช้ได้

4

ทีนี้ มาเริ่มที่ Animation กันเลย!! คลิกที่ตัว GameObject Rockman ของเรา แล้วเปิดหน้าต่าง Animation ขึ้นมา (ถ้าไม่มีให้เปิดจาก Window—->Animation) จากนั้นคลิกตรงปุ่ม Add Curve ตรงด้านซ้าย เพื่อสร้างไฟล์ .anim ที่จะใช้เล่น Animation โดยเราจะใช้ชื่อว่า rockman_idle เป็นตอนที่ยืนเฉยๆ แล้วกะพริบตานั่นเอง จากนั้นลากไปใส่ตำแหน่งตามภาพเลย~

5

6

 

 

7

 

ต่อไปเราจะมาทำ Animation ตอนวิ่งกัน ทำเหมือนขั้นตอนที่แล้ว แต่คราวนี้เราจะถึง Sprite มาทั้งแถบ เพราะแต่ละชิ้นคือ Sprite ในแต่ละ Frame นั่นเอง

8

 

เสร็จจาก Animation แล้ว เราจะไปวุ่นวายกับ Animator ซึ่งเป็นตัว Control Animation กัน เริ่มจากสร้างตัวแปรควบคุม state ของ Animation ตัวนี้ก่อนตามรูปเลย หลักการคือ เมื่อ run = 1 Rockman จะวิ่งนั่นเอง

9

 

เสร็จแล้วก็คลิกขวาเพื่อลากเส้น Transition ตามภาพ โดยตั้ง Condition เอาไว้ด้วย (run = 1 Rockman วิ่ง/ run = 0 Rockman หยุดและ idle)

10

11

 

เสร็จแล้ว ให้สร้าง Script เอาไว้รับค่าจาก Keyboard ติดเอาไว้ที่ตัว Rockman ได้เลย! โดยโค้ดตามภาพข้างล่าง
(ใช้ GetKeyDown() เพื่อตรวจจับเวลา Hold Right Button เอาไว้ และใช้ GetKey เพื่อ Detect เวลาที่ไม่ได้กด)

12

 

เสร็จแล้วลองกด Play แล้วจิ้มปุ่มลูกศรขวามือค้างไว้ดูสิ!! Rockman ก็จะวิ่งได้แล้ว!! เย้!! สามารถประยุกต์ใช้ต่อไปได้เพื่อทำเกมเต็มตัวนะจ๊ะ :3

13

 

กู้เงิน | เศรษฐกิจพอเพียง | สินเชื่อบุคคล | สมัครบัตรกดเงินสด | สินเชื่อ | เงินกู้ด่วน | ยืมเงินทรูมูฟ | เงินด่วนนอกระบบ