Blog

  • SwiftUI App Scene และ View ใช้สร้าง app ได้ทั้งแอปแล้ว

    SwiftUI App Scene และ View ใช้สร้าง app ได้ทั้งแอปแล้ว

    ในงาน wwdc 2020 ได้ประกาศว่า SwiftUI สามารถนำมาสร้าง App ทั้ง app โดยไม่ต้องพึ่งพา framework อื่นๆ ได้แล้ว ซึ่งแต่เดิมตอนเปิดตัวในปี 2019 นั้น swiftUI ยังต้องพึ่งพา framework อื่นๆ เช่น UIKit, AppKit ในการสร้าง control บางอย่างเช่น tabview เป็นต้น

    แต่ในปีนี้ 2020 เราสามารถสร้าง app ทั้ง app โดยใช้ swiftUI framework อย่างเดียวได้ โดยทางทีมพัฒนาได้อธิบายว่า จะมีส่วนประกอบ คือ App Scene และ View ที่นำมาประกอบกันเป็น app ได้

    SwiftUI App Scene และ View

    View : ชิ้นส่วนของ User interface เช่น button, text รวมถึง container ด้วย เป็นชิ้นส่วนชิ้นเล็กๆ ที่จะนำมาประกอบกัน จนกลายเป็นส่วนติดต่อผู้ใช้งาน

    Scene : เป็น container ให้กับ view ซึ่ง scene ต่างๆนี้ ระบบจะเป็นตัวพิจารณาเองว่า ในแต่ละ platform จะแสดงหน้าตาออกมาได้อย่างไร ทางทีมพัฒนาได้สร้าง built-in scene สำเร็จรูปมาให้เราใช้บางส่วน เช่น WindowGroup, DocumentGroup, Setting เป็นต้น

    App : เป็นส่วนที่คลุม Scene และ view ทั้งหมด ถือเป็นจุดตั้งต้นของ App

    ความสัมพันธ์ของ App scene และ View

    App scene และ view เป็น subset กัน โดยที่ App สามารถมีหลายๆ scene และ scene ก็สามารถมีหลายๆ scene หรือมีหลายๆ view อยู่ข้างในได้ ซึ่งทาง apple ก็ทำแผนผังมาให้ดูได้ดีดังภาพด้านล่าง

    ภาพจาก video ในงาน wwdc 2020

    ตัวอย่าง Code

    ตัวอย่าง code ด้านล่าง แสดง App ,scene view ใน swiftUI block

    @main struct MyBookApp: App {
        var body: some Scene {
            WindowGroup {
                TabView {
                    ComputerBookView()
                    ArtBookView()
                    ComicBookView()
                }
            }
        }
    }

    MyBookApp เป็นส่วนของ App

    WindowGroup เป็น scene

    TabView เป็น View ที่มี ComputerBookView, ArtBookView,ComicBookView ซ้อนอยู่

    Reference and other link

    https://developer.apple.com/documentation/swiftui/app-structure-and-behavior

    Some Keyword ใน SwiftUI คืออะไร และใช้เพื่ออะไร

    Udemy – Online Programming course

    Home

    ภาพประกอบ ภาพโดย William Iven จาก Pixabay

  • Some Keyword ใน SwiftUI คืออะไร และใช้เพื่ออะไร

    Some Keyword ใน SwiftUI คืออะไร และใช้เพื่ออะไร

    Some Keyword ใน SwiftUI นั้น เป็น keyword ที่เริ่มมีในภาษา swift version 5.1 เป็นต้นมา ซึ่งหากดูในเอกสารของ swift.org แล้ว จะอยู่ในส่วนของหัวข้อ Opaque Type

    การระบุ keyword some ที่ด้านหน้าของ return type ไหนก็ตาม return type นั้นจะกลายเป็น Opaque Type

    “Some” Keyword

    เมื่อสร้าง โปรเจ็คใหม่โดยใช้ swiftUI หรือการ แตก subview (extract subView) เราจะเห็น Keyword some ถูกนำมาใช้ที่ตัวแปร body

    Keyword some ถูกนำมาใช้ในส่วนของการประกาศตัวแปร body ดังนี้

    ตัวอย่างเช่น var body: some View

    import SwiftUI
    
    struct ContentView: View {
        var body: some View {
            Text("Hello, world!")
                .padding()
        }
    }
    
    struct ContentView_Previews: PreviewProvider {
        static var previews: some View {
            ContentView()
        }
    }
    

    Some Keyword ใน SwiftUI คืออะไร

    some จะถูกระบุหน้า return type โดยถ้าระบุ some ไว้ ก็หมายความว่า ชนิดข้อมูลที่ return กลับนั้น จะเป็นชนิดข้อมูลอะไรก็ได้ ที่สอดคล้อง(conform to) กับ protocol หลัง keyword some

    ตัวอย่างเช่น

    var body: some View {
            Text("Hello, world!")
        }

    หมายความว่า ชนิดข้อมูล(Type) ที่ส่งกลับมายังตัวแปล Body นั้น จะเป็นชนิดข้อมูลอะไรก็ได้ โดยที่ต้องสอดคล้องกับ protocol View

    ดังนั้นเราจึงสามารถเอา Text(“Hello, world!”) ใส่เข้าไปได้ เพราะ Text นั้น conform กับ View นั่นเอง

    เราสามารถดูว่า Type conform กันหรือเปล่าจากเอกสาร developer document ในเว็บไซต์ apple

    เปิดเอกสารของ Apple developer แล้วเลื่อนลงไปข้างล่างจะพบหัวข้อ conforms To ที่ระบุว่า conform to view

    Type ไหนบ้างที่ conform กับ View

    อ้างอิง

    https://stackoverflow.com/questions/56433665/what-is-the-some-keyword-in-swiftui

    https://www.vadimbulavin.com/opaque-return-types-and-the-some-keyword-in-swift/

    Link อื่นๆ

    Udemy

    Home

    ขอบคุณภาพโดย Eerina Hart จาก Pixabay

  • Swift Grammar – วิธีอ่านเอกสารอ้างอิงของ swift ให้เข้าใจ

    Swift Grammar – วิธีอ่านเอกสารอ้างอิงของ swift ให้เข้าใจ

    ในเอกสารอ้างอิงของภาษา swift บนเว็บไซต์ swift.org นั้น จะมีการเขียนการใช้งานภาษา swift ในรูปแบบแบบมาตรฐานเรียกว่า Swift grammar (เหมือน grammar การใช้งานภาษาอังกฤษ) การรู้จักกับแกรมมาของภาษา swfit จะช่วยให้อ่านเอกสารอ้างอิงได้เข้าใจมากขึ้น

    Swift Grammar notation

    คำนิยาม

    Grammar Production : รูปแบบที่สามารถเป็นไปได้ อยู่ด้านขวาของลูกศร (→)

    Grammar Production Rule : กฎของ grammar ในเรื่องนั้นๆ ซึ่งก็คือข้อความ grammar ทั้งหมดนั่นเอง

    สัญลักษณ์ที่ใช้ในเอกสารอ้างอิงของ swift มีดังนี้

    1 ลูกศร (→)

    ลูกศรในเอกสาร swift (→) ใช้ระบุ grammar production สามารถอ่านได้ว่า “Can consist of” หรือ “สามารถที่จะมี”

    ยกตัวอย่าง

    getter-setter-block → { getter-clause setter-clause opt } | { setter-clause getter-clause }

    อ่านว่า getter-setter-block สามารถที่จะมี getter block + setter block (opt – setter block อาจจะมีหรือไม่มีก็ได้) หรือ setter block + getter block

    2 ตัวอักษรเอียง

    ตัวอักษรเอียง (italic text) หมายถึง Syntactic categories (ประเภทของการสร้างประโยค) สามารถระบุได้ทั้งฝั่งซ้ายและฝั่งขวาของลูกศร (คือเอกสารจะเขียนไว้ได้ทั้งซ้ายและขวาของ grammar production rule ถ้าอยู่ฝั่งขวามักจะเป็น link ดังตัวอย่างด้านล่าง)

    ตัวอย่างเช่น

    getter-setter-block → { getter-clause setter-clause opt } | { setter-clause getter-clause }

    syntactic category ในประโยคนี้คือ

    getter-setter-block

    getter-clause (syntactic category ที่เป็น link ไปดูที่ไปที่มาต่อได้)

    setter-clause

    3 ตัวอักษรหนา

    ตัวอักษรหนา (boldface constant width text) จะปรากฎเฉพาะด้านขวาของ production grammar rule

    บ่งบอกถึงเครื่องหมายวรรคตอน (Punctuation) หรือ คำ Keyword ต่างๆ ตัวอย่างเช่น วงเล็บปีกกา ( { } ), true/false, nil เป็นต้น

    ตัวอย่าง

    boolean-literal → true | false

    หมายความว่า ค่าของตัวแปร boolean จะสามารถมี true หรือ false

    4  vertical bars (|) = “หรือ”

    Vertical bar (เส้นขีดแนวดิ่ง) บ่งบอกถึงคำว่า “หรือ”

    มันเป็น alternate production rule คือ กฎหรือรูปแบบอาจจะเป็นไปได้สำหรับ grammar production นั้นๆ

    กรณีที่มี alternate production rule หลายๆ แบบ ก็จะเขียน grammar production rule แยกบรรทัดกัน

    ตัวอย่างการแตกประโยค “หรือ”

    GRAMMAR OF A GETTER-SETTER BLOCK

    getter-setter-block → { getter-clause setter-clause opt } | { setter-clause getter-clause }

    แตกออกเป็นสองบรรทัดได้ดังนี้

    getter-setter-block → { getter-clause setter-clause opt }

    getter-setter-block → { setter-clause getter-clause }

    ซึ่งทั้งสองแบบก็ให้ความหมายเดียวกัน

    5 Opt

    Opt (ตัวเอียง) ใช้ระบุใน grammar production (ด้านขวาของลูกศร) บอกถึงจะมีหรือไม่มีก็ได้ (option)

    บทความอื่นๆ

    รู้จักภาษา Swift กันก่อน

    Cocoapods ตอนที่ 1 – แหล่งรวม Library สำหรับนักพัฒนา

    Udemy

  • Decorator pattern คืออะไร

    Decorator pattern คืออะไร

    Decorator pattern คือรูปแบบการเขียนโปรแกรมให้สามารถเพิ่มความสามารถให้กับ object โดยไม่ต้องแก้ไข class โดยเราสามารถ instantiate new class เข้าไปยัง object ของ class เดิม เพื่อเพิ่มเติมความสามารถให้มากขึ้นโดยไม่ต้องแก้ไข code ของ class เดิมเลย

    ดูตัวอย่างการเรียกใช้ Decorator pattern กันก่อน

    ลองดู code ตัวอย่างการใช้งานกันก่อน โดยจะยกตัวอย่างคอมแบบประกอบ

    สมมติว่าเรากำลังเขียน class ของร้านคอมที่มี คอมพิวเตอร์จัดชุดอยู่แล้วให้ลูกค้าสามารถเพิ่มอุปกรณ์ (upgrad)เข้ามาได้ ถ้าหากจะใช้ pattern การเรียกใช้งาน class / object จะเป็นดังนี้

    DefaultComputerSet1 basicComputer = new DefaultComputerSet1();
                ComputerUpgrade upgradeSet = new ComputerUpgrade(basicComputer);
                upgradeSet = new GeforceRTX2080(upgradeSet);
                upgradeSet = new CreativeSoundAE7(upgradeSet);
    
    
                Console.WriteLine("Description : " + upgradeSet.GetDescription());
                Console.WriteLine("Price : " + upgradeSet.GetPrice());
            

    ผลลัพท์

    Description และราคา แสดงใน console

    Summary : DefaultComputerSet 1 + Geforce RTX 2080 + Creative Sound Blaster AE7

    Price : 83900

    จาก Code ด้านบนจะเห็นว่า object upgradeSet จะมีการประกาศ new Class เพิ่มเข้ามาได้เรื่อยๆ (new GeforceRTX2080, new CreativeSoundAE7…..)

    แล้วสุดท้ายเราก็เรียกใช้ getDescription, getPrice เพื่อดูว่าเลือกอุปกร์อะไรไป มันก็จะรวมข้อมูล description, price จาก ทุกๆ class ที่เรา add เข้าไปใน object ได้

    จุดสังเกตุของ pattern นี้จะเห็นว่าเราไม่ต้องไปแก้ class เดิมเลย (DefaultComputerSet1) แต่เราจะ เพิ่ม class เข้าไปเรื่อยๆ ถ้าหากมีอุปกรณ์ใหม่ๆ เป็นร้อยเป็นพัน มันก็จะไม่มีผลกระทบต่อ class เดิมด้วย นี่คือข้อดีของ pattern นี้

    Decorator pattern code example

    Code ด้านล่างประกอบด้วย Class และ interface ดังนี้

    IComputer : เป็น interface ที่ใครสืบทอดไปก็ตามจะต้อง implement method : getDescription และ getPrice

    DefaultComputerSet : เป็น class ที่กำหนด set ตั้งต้น และราคา เหมือนเวลาที่ร้านคอมมีคอมวางไว้หน้าร้าน แล้วถามว่าเราจะ upgrade หรือเปล่า

    ComputerUpgrade : เป็น abstract class ของอุปกรณ์ upgrade ต่างๆ

    GeforceRTX2080 : เป็น class ที่สืบต่อมาจาก ComputerUpgrade จะใช้ instantiate เพิ่มเข้าไปใน basicComputer object ในกรณีสมมติว่าจะซื้อการ์ดจอด้วย

    CreativeSoundAE7 : เป็น class ที่สืบต่อมาจาก ComputerUpgrade จะใช้ instantiate เพิ่มเข้าไปใน basicComputer object ในกรณีสมมติว่าจะซื้อ sound card ด้วย

    using System;
    
    using AppKit;
    using Foundation;
    
    namespace test2
    {
        public interface IComputer
        {
            string GetDescription();
            float GetPrice();
        }
        public class DefaultComputerSet1 : IComputer {
    
    
            public string GetDescription()
            {
                return "Default computer set 1";
            }
    
            public float GetPrice()
            {
                return 30000f;
            }
        }
    
        public abstract class ComputerUpgrade : IComputer
        {
            private readonly IComputer _computer;
            public ComputerUpgrade(IComputer computer)
            {
                _computer = computer;
            }
    
            public virtual string GetDescription()
            {
                return _computer.GetDescription();
            }
    
            public virtual float GetPrice()
            {
                return _computer.GetPrice();
            }
        }
    
        public class GeforceRTX2080 : ComputerUpgrade{
    
            public GeforceRTX2080(IComputer computer) : base(computer)
            {
                
            }
    
            public override string GetDescription()
            {
                return base.GetDescription() + " + Geforce RTX 2080";
            }
    
            public override float GetPrice()
            {
                return base.GetPrice() + 47900f;
            }
        }
    
        public class CreativeSoundAE7 : ComputerUpgrade
        {
            public CreativeSoundAE7(IComputer computer) : base(computer)
            {
            }
    
            public override string GetDescription()
            {
                return base.GetDescription() + " + Creative Sound Blaster AE7";
            }
    
            public override float GetPrice()
            {
                return base.GetPrice() + 6000f;
            }
        }
    
        public partial class ViewController : NSViewController
        {
            public ViewController(IntPtr handle) : base(handle)
            {
            }
    
            public override void ViewDidLoad()
            {
                base.ViewDidLoad();
    
    
                // Do any additional setup after loading the view.
            }
    
            partial void ClickedButton(NSObject sender)
            {
               
                DefaultComputerSet1 basicComputer = new DefaultComputerSet1();
                ComputerUpgrade upgradeSet = new GeforceRTX2080(basicComputer);
                upgradeSet = new CreativeSoundAE7(upgradeSet);
    
    
                Console.WriteLine("Description : " + upgradeSet.GetDescription());
                Console.WriteLine("Price : " + upgradeSet.GetPrice());
            }
    
    
            public override NSObject RepresentedObject
            {
                get
                {
                    return base.RepresentedObject;
                }
                set
                {
                    base.RepresentedObject = value;
                    // Update the view, if already loaded.
                }
            }
        }
    }
    
    

    ทิ้งท้าย

    Pattern นี้มีประโยชน์ในกรณีที่อยากเพิ่มความสามารถ/ behavior แต่ไม่ไปยุ่งกับ class เดิม โดยเราจะทำการ instantiate class ใหม่เข้าไปใน object เดิม ทำให้ code ที่เขียนขึ้นมีคุณสมบัติ open/close ตรงตาม SOLID Principle

    บทความและคอร์สอื่นๆ

    Udemy

    c# sealed class คืออะไร

    C# Abstract class คืออะไร

  • c# sealed class คืออะไร

    c# sealed class คืออะไร

    c# sealed class คือการทำให้ class ไม่สามารถสืบต่อได้อีกต่อไป

    การประกาศ Class ให้เป็น sealed class

    เราจะใส่ Keyword sealed ไว้ที่ class ก็จะทำให้ class กลายเป็น sealed class แล้ว

    public sealed class Honda : Car
        {
    
        }

    Complier กับ Sealed class

    หากเราพยายามที่จะสืบทอด class จาก sealed class แล้ว visual studio จะฟ้องว่า ไม่อนุญาตให้ทำการสืบต่อ

    จากภาพด้านล่างจะเห็นว่าได้กำหนดให้ Honda เป็น sealed class เมื่อเราทำการประกาศ class civic โดยให้สืบต่อจาก Honda class จะเห็นว่าไม่สามารถทำได้ compiler จะฟ้อง error ให้เห็นหากเราเอาเมาส์ไปชี้ข้อความ Honda ที่ขีดเส้นไว้

    error ที่ visual studio บอกเราว่าไม่สามารถทำได้

    C# Sealed class ใช้ประโยชน์อย่างไร

    เมื่อเราออกแบบคลาสไม่ให้มีการสืบทอด นอกจากนี้ยังป้องกันผู้นำ class ไปสืบทอดใช้อย่างไม่เหมาะสม ตัวอย่างเช่น Microsoft ได้ sealed class String ไว้ ถ้าหากว่าไม่ sealed แล้วเปิดให้โปรแกรมเมอร์อย่างเราไปใช้อย่างไม่เหมาะสมก็อาจจะมีผลกระทบอื่นๆตามมาได้

    นอกจากนี้การที่ระบุว่าเป็น sealed class ยังช่วยเรื่อง performance อีกด้วย เพราะว่า CLR (common language runtime) ไม่ต้องวิ่งหาคลาสลูกต่อๆไป

    บทความและแหล่งความรู้ OOP แนะนำ

    C# Abstract class คืออะไร

    Interface – OOP

    Discover Udemy’s featured courses!

  • C# Abstract class คืออะไร

    C# Abstract class คืออะไร

    C# Abstract Class – คือการประกาศว่า class เป็นต้นแบบให้ class ลูกสืบทอดโดยกำหนดความสามาคถตั้งต้นให้ class ลูกเอาไปกำหนดความสามารถต่อ โดยที่ห้าม instantiate ที่ abstract class แต่ให้ instantiate ที่ class ที่สืบต่อไปแทน

    ดูภาพรวมกันก่อน

    Abstract class เป็นการประกาศ Class โดยที่เราจะใส่ Keyword abstract ไว้ในตอนที่ประกาศ Class

    public abstract class Car
    {
        // Class members here.
    }

    นอกจากใส่ keyword คำว่า abstract ไว้ที่ class เรายังสามารถใส่ไว้ที่หน้า method ได้ด้วย และไม่จำเป็นต้องใส่ { } ต่อท้าย( ในกรณีที่ประกาศ method ไว้เฉยๆ โดยไม่ได้มี code การทำงาน)

    public abstract class Car
    {
        public abstract void StartEngine();
    }

    ซึ่งถ้าเราใส่ Abstract keyword ไว้ใน method ที่มี code ใน body แล้ว compiler จะแจ้ง error ตามภาพข้างล่างครับ

    ฟ้อง error ถ้าใส่ keyword abstract ใน class ที่มี body

    ดังนั้นถ้าเราต้องการให้ abstract class มี method ที่มี code การทำงาน เราก็เขียน method โดยที่ไม่มี abstract keyword ได้เลย

    	public abstract class Car
    	{
    		public  void StartEngine()
    		{
    			Debug.Write("start engine");
    		}
    	}

    ทำไมต้องใช้ Abstract Class

    คุณสมบัติของ abstract class คือมันห้ามไม่ให้มีการสร้าง object หรือ instance จาก abstract class ซึ่งจะมีการฟ้อง error ในตอนที่มีการพิมพ์ code เลย

    ฟ้อง error ถ้าพยายามจะ instantiate abstract class

    ดังนั้นเหตุผลที่เราจะใช้ abstract class ก็คือ

    1.ห้าม instantiate ที่ abstract class ป้องกันเอาไปใช้ผิด (ทั้งตัวเราเองหรือทีมของเรา)
    2. ต้องการกำหนดความสามารถพื้นฐานไว้ แล้วให้ลูกสืบต่อไป อาจจะมีโค้ดการทำงานไว้เลย หรือสร้างไว้เฉยๆ แล้วให้ลูกไปกำหนดการทำงานเอาเองก็ได้

    ตัวอย่างการใช้งาน

    // ห้าม instantiate ที่ car แต่ให้สืบต่อไปใช้งาน
    public abstract class Car  
    	{
    		// กำหนดให้รถทุกคันสตาร์ทเครื่องได้
    		public  void StartEngine()
    		{
    			Debug.Write("start engine");
    		}
    	}
    
    	public class Toyota : Car
        {
    
        }
    
    	public class Honda : Car
        {
    
        }
    
    	public class ShowRoom
        {
    		public void TestDrive()
            {
    
    			Toyota toyota = new Toyota();
    			toyota.StartEngine(); 
    
    			Honda honda = new Honda();
    			honda.StartEngine();
            }
    		
        }

    c# Abstract class ส่งท้าย

    เราสามารถนำประโยชน์มาใช้เพื่อ

    – กำหนด/สร้างความสามารถต่างๆให้ class ลูกนำไปใช้ (สร้างมาตรฐานและลดการเขียน code ซ้ำๆ)

    – ห้าม instantiate ที่ abstract class (ป้องกันการใช้ผิดโดยการให้ programmer ที่จะใช้ class ไปกำหนดการทำงานและสร้าง instance ใน class ลูกแทน)

    Type in C# – ว่าด้วยเรื่องชนิดของข้อมูล

    Interface – OOP

    อ้างอิง

    https://docs.microsoft.com/en-us/dotnet/csharp/programming-guide/classes-and-structs/abstract-and-sealed-classes-and-class-members

    https://en.wikipedia.org/wiki/Abstract_type

    Level Management in Unity

  • วิธีทำ App Icon ใน Adobe XD

    วิธีทำ App Icon ใน Adobe XD

    วิธีทำ App Icon ใน Adobe XD

    Adobe XD เป็นโปรแกรมที่ใช้ในการออกแบบและสร้างส่วนติดต่อผู้ใช้ (Graphic User Interface) มันสามารถสร้างการคลิกปุ่ม การเปลี่ยนหน้า คร่าวๆ ได้ ซึ่งสามารถนำไปใช้ในการสร้าง Prototype ต้นแบบ และยังสามารถนำมาใช้ทำ App Icon ใน Adobe XD ได้ด้วย

    ในตอนนี้เราจะมาสร้าง App Icon โดยใช้ Adobe XD กันครับ

    ขั้นตอน

    1 เปิดโปรแกรม Adobe XD แล้วเลือก Custom size จากนั้น กำหนดค่าความกว้างและความสูงให้เป็นสี่เหลี่ยมจตุรัส ตามตัวอย่างจะใช้ 1024 X 1024

    2. ในโปรแกรม Adobe XD ให้ใช้เครื่องมือต่างๆ วาด App Icon ที่เราต้องการลงไป

    3 เมื่อ วาดเสร็จ ให้คลิกที่ปุ่ม Plug inด้านล่าง แล้วคลิกที่เครื่องหมาย +เพื่อติดตั้ง Plugin

    4 หน้าต่าง Plug in จะแสดงขึ้น ให้คลิก Search icon

    5. ให้พิมพ์ App icon generator แล้วคลิก search เมื่อผลการค้นหาแสดงขึ้นมา จะเห็น plugin App Icon Generator ให้คลิก install

     

     

    6 เมื่อติดตั้งเสร็จสมบูรณ์แล้ว Plugin จะแสดงใน Tab plugin ให้เราเลือกใช้ได้

    7 เราจะใช้ Plugin ในการ Export Icon โดยให้ลากครอบเลือกวัตถุทั้งหมดของเราก่อน จากนั้นคลิกที่ Plug in จะมีช่องให้กรอกข้อมูล เราก็ทำการกรอกข้อมูล Path ที่จะ save ชื่อโปรเจ็ค แล้วทำการเลือก Platform จากนั้นคลิก Export

    8. เมื่อ Export  เสร็จ ระบบจะแสดงข้อความว่าเสร็จสมบูรณ์ แล้ว

    9 เมื่อเราไปยัง folder ที่เรากำหนดให้ save จะเห็นว่า โปรแกรมจะสร้าง folder แยก platform ไว้ให้ตาม platform ที่เราเลือกไว้ เมื่อเราเข้าไปดูใน folder ก็จะเห็นว่า มี icon ขนาดต่างๆ ได้ถูกสร้างไว้ให้เรียบร้อยแล้วครับ

    ส่งท้าย

    ในตอนนี้เราก็ได้เรียนรู้วิธีทำ App Icon โดยใช้ Adobe XD จะเห็นว่ามีความสะดวกในการ Export Icon เป็นขนาดต่างๆมาก ช่วยประหยัดเวลาที่เราจะต้องมาทำทีละอัน ก็หวังว่าบทความนี้จะเป็นประโยชน์แก่ผุ้อ่านกันนะครับ แล้วพบกันใหม่ สวัสดีครับ

    Download Adobe XD ฟรี

    Adobe XD

    ติดตามบทความด้าน GUI

    บทความด้าน GUI ใน Mifasoft.com

  • How to Export 3D Models from Mixamo to Unity

    How to Export 3D Models from Mixamo to Unity

    วิธีการส่งออกไฟล์จาก Mixamo ให้สามารถใช้งานได้ใน Unity 2019

    สำหรับตอนนี้จะมาแนะนำวิธีการส่งออกไฟล์ 3D Model จากโปรแกรม Maximo (เว็บ) ให้สามารถนำไปใช้ในโปรแกรม Unity 2019 เพื่อพัฒนาเกมหรือแอพปลิเคชั่นกันครับ

    แนะนำ Mixamo

    สำหรับโปรแกรม Mixamo นั้นเป็นโปรแกรมที่รันอยู่บนเว็บ ตอนนี้เป็นลูกค่ายของ Adobe โดยเว็บนี้จะให้เราสามารถ Upload Model กำหนดท่าทาง animation ต่างๆ โดยตัวโปรแกรมจะมี Preset ท่าทางมาให้ เราจะกำหนดท่าทางโดยใช้ Paramter ต่างๆ จากนั้น เราก็สามารถที่จะ download มายังเครื่องคอมพิวเตอร์ของเราเพื่อนำไปใช้งานต่อไป

    แนะนำโปรแกรม Unity 2019

    สำหรับโปรแกรม Unity นั้นเป็นโปรแกรมที่ใช้สร้างเกมและ animation ต่างๆ ซึ่งก็คือ Game engine นั่นเอง

    การใช้งานโปรแกรม Unity สามารถหาอ่านได้ตามลิงค์นี้ครับ

    https://mifasoft.com/category/article/game-engine/unity3d/

    ขั้นตอนการส่งออก 3D Models from Mixamo to Unity

    ดูผ่าน Youtube

    ขั้นตอน

    1. ไปที่ Website mixamo.com

    2. กดปุ่ม Download ทางด้านขวามือ

    3. เปลี่ยน Format เป็น FBX for Unity

    4. คลิกปุ่ม Download

    5. Save file ลงมายังเครื่อง

    6. เปิดโปรแกรม Unity ขึ้นมา จากนั้นค้นหาไฟล์ที่ Download มา แล้วลาก ใส่เข้าไปยัง project window

    7. Model ก็จะปรากฎใน Project ของเราแล้วครับ

    ส่งท้าย

    สำหรับตอนนี้ก็ได้แนะนำการส่งไฟล์จาก Mixamo ออกมายังโปรแกรม Unity3D 2019 เพื่อที่เราจะสามารถนำไปใช้งานได้ต่อไป ซึ่งเป็นขั้นตอนที่ไม่ยากเลย

    หวังว่าบทความนี้จะเป็นประโยชน์กับเพื่อนๆ ได้นำวิธีการไปใช้ในการสร้างเกมหรือสร้างแอพปลิเคชั่นโดยใช้ Unity นะครับ สำหรับตอนนี้ก็ขอสวัสดีครับ

    ติดตามบทความด้าน 3D >>> https://mifasoft.com/category/article/3d/

    ติดตามใน Facebook >>>> https://web.facebook.com/mifasoft

  • Adobe fuse  ใน Mac OS version Catalina ใช้ไม่ได้แล้ว

    Adobe fuse ใน Mac OS version Catalina ใช้ไม่ได้แล้ว

    Adobe fuse  ซึ่งเป็นโปรแกรมที่ใช้สร้างตัวละคร 3D (คล้ายๆ กับโปรแกรม  Poster) ที่ทาง Adobe เคยให้ใช้งานฟรี ตอนนี้ไม่สามารถใช้งานได้แล้วใน  Mac OS version Catalina

    ภาพจาก www.adobe.com

    ซึ่งถ้าใคร update mac os version Catalina แล้วจะไม่มี Adobe fuse ใน Adobe creative cloud desktop app ทำให้ไม่สามารถ install โปรแกรมได้ต่อไป

    โดยทาง Adobe กล่าวว่าจะไม่มีการพัฒนาโปรแกรมตัวนี้อีกแล้ว แต่จะยังคงปล่อยให้ใช้งานโปรแกรม  Adobe fuse ต่อไปให้นานที่สุด แต่เนื่องจากตัวโปรแกรมไม่สามารถทำงานได้ใน  Mac Os version Catalina

    ดังนั้น ตั้งแต่วันที่ 13 กันยายน 2562 ทางฝั่งผู้ใช้ mac ที่ update catalina จะไม่สามารถใช้งานได้แล้ว แต่ผู้ที่ยังใช้  mac version ก่อนหน้า ก็ยังสามารถใช้งานได้ ส่วนฝั่ง windows ก็ยังใช้ได้เหมือนเดิม

    ทั้งนี้ทาง Adobe ได้มีเว็บ Mixamo.com ซึ่งเปิดให้เข้าไปสร้าง  3D character แบบ ออนไลน์ ได้ฟรี รวมทั้งมีโมเดลต้นแบบต่างๆเตรียมไว้ให้ใช้ทดแทน Adobe fuse ครับ

     

     

    แหล่งข่าว https://theblog.adobe.com/an-update-on-adobe-fuse-as-adobe-moves-to-the-future-of-3d-ar-development/

    ติดตามบทความด้าน 3D ได้ที่นี่ https://mifasoft.com/category/article/3d/

  • Unity camera Orthographic size

    Unity camera Orthographic size

    Unity camera – Orthographic size คืออะไร

    ในการพัฒนาโปรแกรม 2D เราจะกำหนด camera projection เป็นแบบ Orthographic

    หลังจากนั้นเราจะกำหนดค่า size เพื่อย่อหรือขยาย 

     

     

    Camera size อยู่ที่ไหน

    Camera size จะแสดงในหน้าต่าง inspector เมื่อเราทำการเลือก camera object และกำหนดกล้องเป็นแบบ orthographic

    Screen Shot 2563-01-03 at 09.16.47.png
    Unity camera orthographic size จะแสดงเมื่อเลือก projection แบบ orthographic

    ทำไมต้องกำหนด camera size

    เนื่องจากว่าขนาดหน้าจอของอุปกร์มีความหลากหลาย ไม่ว่าจะเป็น iphone, ipad, android, pc mac ดังนั้นเราจึงต้องปรับ camera size หรือการซูมให้เหมาะกับอุปกรณ์ที่จะใช้กับโปรแกรม หรือถ้าเราจะเขียนโปรแกรมเพื่อแสดงได้กับหน้าจอหลายๆ ขนาด เราก็สามารถทำได้โดยเขียน script เพื่อปรับค่า camera sizeให้กล้องทำการ zoom ให้เหมาะกับแต่ละอุปกรณ์

    Screen Shot 2563-01-03 at 09.50.21.png
    Preview ในขนาดหน้าจอต่างๆกัน

    ถ้าเราไม่ทำการ zoom ภาพฉากหลัง บางอุปกรณ์ก็อาจจะแสดงภาพไม่ครบได้

    ติดตามบทความเกี่ยวกับ Coding ได้ที่นี่ >> https://mifasoft.com/category/article/coding/

    ติดตามความเคลื่อนไหวของ Mifasoft ได้ที่ facebook fan page : >> https://www.facebook.com/mifasoft

    Download Unity ไปลองหัดใช้ฟรี>> คลิกที่นี่เลยครับ