User Tag List

Page 1 of 2 1 2 LastLast
Results 1 to 10 of 17

Thread: Detailed Guide on How to create a Windows Store App with HTML5 exporter

  1. #1
    Forum Moderator

    Fusion 2.5 MacFusion 2.5 DeveloperFusion 2.5+ DLCAndroid Export ModuleHTML5 Export ModuleiOS Export ModuleUniversal Windows Platform Export ModuleSWF Export ModuleMac Export ModuleInstall Creator Pro
    Fusion 2.5 (Steam)Fusion 2.5 Developer (Steam)Android Export Module (Steam)HTML5 Export Module (Steam)iOS Export Module (Steam)
    Perry's Avatar
    Join Date
    Dec 2013
    Location
    Watertown, WI
    Posts
    4,334
    Mentioned
    49 Post(s)
    Tagged
    0 Thread(s)

    Detailed Guide on How to create a Windows Store App with HTML5 exporter

    There are a few ways to create a Windows App Store App, for x64,x86 and ARM.

    There are a few things that you need in order to be successfully.

    1a. MS VS 2013 Express. (The US Version = 4.3 gb. There is a 700 Mb version on the MS site, but that one is missing the Java App section)
    (http://go.microsoft.com/?linkid=9832246&clcid=0x409)
    This comes with the whole package, including for Windows Phone and Phone Testing App.
    (vs2013.3_winexp_ret_ENU.iso)

    1b. The Windows App Certification Kit is needed for testing your application. (You can test html5 and EXE/Setup files with it)
    http://msdn.microsoft.com/en-us/libr.../hh694081.aspx for detailed information.
    http://dev.windows.com/en-us/develop...tification-kit (The download page)


    Once you installed all of this, then lets start with the fun part


    In MF 2.5 Export your project as HTML5
    Make SURE that the Output is set to UTF-8

    19.PNG


    1. Lets fire up MS VS 2013 and select new project, and under JavaScript select Store Apps --> Windows Apps --> Blank App.

    1.jpg

    2. Go to the folder, where you exported your HTML5 project in Fusion.

    3.jpg

    3. Highlight the folders and file, and Drag them ONTO the project name (JS -...... ) The one that is highlighted on the right side.
    The files and folders are now copied into the project.

    4. Now bring up the PACKAGE.APPXMANIFEST file

    4.jpg

    And fill out the basic information.
    - Display name

    CHANGE the Start page, to the newly copied html page (index.html)

    5. Since the HTML5 Exporter does not export to UTF-8 with signature, we have to manually save 2 files again
    - index.html
    - runtime.js

    For both you need open the file, and then select File--->Save As
    Then on the Save screen, click on the dropdown box to change the Save type

    7.jpg

    Make SURE it says UTF-8 With Signature!

    6. Under the Packaging Tab you can fill out the Version number, and other info.

    8.jpg

    7. There is a Visual Tab, which we are skipping for now.

    9.jpg

    8. Now we are going to create the package.
    Go to STORE and select Create App Package

    10a.jpg


    9. Select No since we Don't want to upload yet.
    If you select Yes, you need to have a Windows Dev Account for uploading apps to the Windows Store.

    11.PNG


    10. The next step is to select for what Platform you want the App for
    Just select all of them, and make SURE that you select "RELEASE" and not the "DEBUG" version

    12.jpg

    11. Select Local Machine for testing

    13.jpg

    And select "Launch Windows App Cert. Kit"


    12. Once The Kit App launches, leave everything default and hit Next

    14.jpg


    13. Oh oohhh.... The Test failed.

    15.PNG

    The reason why it failed is this

    16.jpg


    Windows have some default icons, which are blank, so they need to be replaced.
    (This is Step 7, which we skipped for now, since there are a LOT of images you can do)

    14. I only changed the default images, which have a filename in the folder box, right above the images.

    17.jpg

    So replace the 4 images, with the new ones, and make sure the Sizes are correct.
    (I will be developing a small tool, that creates all the different sizes of images later on)

    15. Repeat Step 8 - 12 and this will be the result.

    18.PNG


    Congratulations!!!
    You just made your 1st Windows 8.x App for the Tablet and/or Phone.

    Now you can upload it to the Store, and make big $$$.
    Please contact me for my Paypal, so I can get a percentage

    Good luck with it, and if you have any questions, don't hesitate to contact me, or drop a message here.

  2. #2
    Clicker Fusion 2.5 DeveloperAndroid Export ModuleHTML5 Export ModuleiOS Export ModuleUniversal Windows Platform Export ModuleSWF Export ModuleMac Export Module
    Fusion 2.5 (Steam)Fusion 2.5 Developer (Steam)Android Export Module (Steam)HTML5 Export Module (Steam)iOS Export Module (Steam)Universal Windows Platform Export Module (Steam)
    Koji_Kabuto's Avatar
    Join Date
    Jul 2006
    Location
    Venezuela
    Posts
    2,851
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Hello Perry,

    Thank you for this excellent tutorial. Do you think it possible that you believe a PDF guide with larger images? You can ask for help to the friend Sparckman who is a genius doing this!

  3. #3
    Forum Moderator

    Fusion 2.5 MacFusion 2.5 DeveloperFusion 2.5+ DLCAndroid Export ModuleHTML5 Export ModuleiOS Export ModuleUniversal Windows Platform Export ModuleSWF Export ModuleMac Export ModuleInstall Creator Pro
    Fusion 2.5 (Steam)Fusion 2.5 Developer (Steam)Android Export Module (Steam)HTML5 Export Module (Steam)iOS Export Module (Steam)
    Perry's Avatar
    Join Date
    Dec 2013
    Location
    Watertown, WI
    Posts
    4,334
    Mentioned
    49 Post(s)
    Tagged
    0 Thread(s)
    Working on it already
    Don't need Sparckman for that lol... But it's going to be in the Click store for Free

  4. #4
    Forum Moderator

    Fusion 2.5 MacFusion 2.5 DeveloperFusion 2.5+ DLCAndroid Export ModuleHTML5 Export ModuleiOS Export ModuleUniversal Windows Platform Export ModuleSWF Export ModuleMac Export ModuleInstall Creator Pro
    Fusion 2.5 (Steam)Fusion 2.5 Developer (Steam)Android Export Module (Steam)HTML5 Export Module (Steam)iOS Export Module (Steam)
    Perry's Avatar
    Join Date
    Dec 2013
    Location
    Watertown, WI
    Posts
    4,334
    Mentioned
    49 Post(s)
    Tagged
    0 Thread(s)
    Created a PDF guide, and is in process for the Click Store. Should be online soon.

  5. #5
    Clicker Fusion 2.5 DeveloperAndroid Export ModuleHTML5 Export ModuleiOS Export ModuleUniversal Windows Platform Export ModuleSWF Export ModuleMac Export Module
    Fusion 2.5 (Steam)Fusion 2.5 Developer (Steam)Android Export Module (Steam)HTML5 Export Module (Steam)iOS Export Module (Steam)Universal Windows Platform Export Module (Steam)
    Koji_Kabuto's Avatar
    Join Date
    Jul 2006
    Location
    Venezuela
    Posts
    2,851
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Thanks Perry!

  6. #6
    Forum Moderator

    Fusion 2.5 MacFusion 2.5 DeveloperFusion 2.5+ DLCAndroid Export ModuleHTML5 Export ModuleiOS Export ModuleUniversal Windows Platform Export ModuleSWF Export ModuleMac Export ModuleInstall Creator Pro
    Fusion 2.5 (Steam)Fusion 2.5 Developer (Steam)Android Export Module (Steam)HTML5 Export Module (Steam)iOS Export Module (Steam)
    Perry's Avatar
    Join Date
    Dec 2013
    Location
    Watertown, WI
    Posts
    4,334
    Mentioned
    49 Post(s)
    Tagged
    0 Thread(s)
    The PDF is now for Free in the Click store!

    http://clickstore.clickteam.com/tutorials?product_id=138

  7. #7
    Clicker Fusion 2.5 DeveloperAndroid Export ModuleHTML5 Export ModuleiOS Export ModuleUniversal Windows Platform Export ModuleSWF Export ModuleXNA Export ModuleMac Export ModuleUnicode Add-on
    crayzorechos's Avatar
    Join Date
    Feb 2013
    Location
    Russia.
    Posts
    215
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi clickteam and all clickers! Great man Perry! Really great man! But I hurry first for this :P! Thanks for Great tutorial!

  8. #8
    Clicker Fusion 2.5 DeveloperAndroid Export ModuleHTML5 Export ModuleiOS Export ModuleUniversal Windows Platform Export ModuleSWF Export ModuleMac Export Module
    Fusion 2.5 (Steam)Fusion 2.5 Developer (Steam)Android Export Module (Steam)HTML5 Export Module (Steam)iOS Export Module (Steam)Universal Windows Platform Export Module (Steam)
    Koji_Kabuto's Avatar
    Join Date
    Jul 2006
    Location
    Venezuela
    Posts
    2,851
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Perry View Post
    The PDF is now for Free in the Click store!

    http://clickstore.clickteam.com/tutorials?product_id=138
    Perry you are the best!

    I have not tried the stuck because I need Windows 8 to build and test. Tomorrow I buy a license to use it on my Parallels Desktop.

    Someone from the Forum has done and to run an App on a Surface Pro, for example?

  9. #9
    Forum Moderator

    Fusion 2.5 MacFusion 2.5 DeveloperFusion 2.5+ DLCAndroid Export ModuleHTML5 Export ModuleiOS Export ModuleUniversal Windows Platform Export ModuleSWF Export ModuleMac Export ModuleInstall Creator Pro
    Fusion 2.5 (Steam)Fusion 2.5 Developer (Steam)Android Export Module (Steam)HTML5 Export Module (Steam)iOS Export Module (Steam)
    Perry's Avatar
    Join Date
    Dec 2013
    Location
    Watertown, WI
    Posts
    4,334
    Mentioned
    49 Post(s)
    Tagged
    0 Thread(s)
    Thanks.

    Sorry for the Delay... I've been working on some things.
    Hopefully this weekend, I will get my license done for Windows, and upload my 1st game to Windows.
    (Playing with the window screen settings. on how I can get a perfect full screen. ) (Since you cannot make it fit for display, like with other exporters)

  10. #10
    Clicker Fusion 2.5 (Steam)Fusion 2.5 Developer (Steam)Android Export Module (Steam)HTML5 Export Module (Steam)iOS Export Module (Steam)

    Join Date
    Aug 2013
    Posts
    27
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi everybody, here video a lesson (subtitlings are included, use the YouTube "translation of subtitlings" function).


Page 1 of 2 1 2 LastLast

Similar Threads

  1. How create Windows 8 Modern UI applications using HTML5 Exporter.
    By crayzorechos in forum Guides, Tutorials, Examples, Widgets
    Replies: 11
    Last Post: 8th June 2015, 09:44 PM
  2. Replies: 1
    Last Post: 1st August 2014, 03:51 AM
  3. In-App Purchases - a guide - iOS Store Object
    By Anders in forum iOS Export Module Version 2.0
    Replies: 32
    Last Post: 11th March 2014, 04:42 AM
  4. A Guide to using Status/Navigation bars [Android Exporter]
    By Danny in forum Clickteam Guides, Tutorials and Examples
    Replies: 0
    Last Post: 13th January 2014, 08:57 AM
  5. A little guide to get started with the XNA exporter for Xbox
    By colej_uk in forum XNA Export Module Version 2.0
    Replies: 23
    Last Post: 30th December 2012, 12:02 AM

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •