2 Replies Latest reply on Mar 17, 2014 4:16 PM by Herbert2001

    Creating a game/app using HTML 5. Where do I start?

    artbywaqas@yahoo.com Level 1

      Creating a game/app using HTML 5. Where do I start?

      I want to be able to release the app when completed on several different platforms : iphone, ipad, android, windows etc

       

       

       

      I want to create my first app, basically a multiple choice type quiz game with fun animation and sound effects integrated in it.

       

      I've been doing some research on HTML 5 and Adobe CC's additions to Flash, Indesign, Dreamweaver and the new Edge Animate.

       

       

      What is the correct or best way to go about this?

       

       

       

      Flash - for animation & interactivity

       

       

      Will HTML5 let me use action script? I noticed there are separate code snipets for HTML5/

       

       

       

       

      Indesign to export ?

       

       

       

       

      Or is Edge Animate the new all in one tool to replace all this?

        • 1. Re: Creating a game/app using HTML 5. Where do I start?
          kglad Adobe Community Professional & MVP

          i haven't seen an app that eliminates the need to know javascript and html but flash is getting there.  it does have a snippets panel that contains a variety of code but the actionscript you can use is very limited.

          1 person found this helpful
          • 2. Re: Creating a game/app using HTML 5. Where do I start?
            Herbert2001 Level 4

            Html 5 and Flash are sort of two competing technologies. Flash is steadily used less and less on the web, and html5/canvas/javascript taking its place. Many good js frameworks exist to help you build browser games, such as listed here: http://html5gameengine.com/

             

            You will have to learn javascript first, though. CodeAcademy can help you there. Then start with one of the game frameworks and build your first simple games.

             

            If you are looking into html5 games development without having to know anything about javascript or even html, there is a brilliant tool that allows you to do exactly that: Scirra Construct 2. Any 2d game can be built in it, and no need to learn javascript: the built-in event and behaviour system pretty much allows for any type of game you might have in mind. Full 2d physics are supported.

             

            Best of all: you can export to web, executable (mac/win), Android, iOS, BlackBerry, Windows8, and many more platforms. The free version is already enough for simpler web games. It comes bundled with scores of game templates - for example, you can build your Angry Bird clone in a matter of (literally) minutes.

            Last year I developed my first iOS game with it (in spite of that I could have used js and a game framework, I was curious to see how far I could go with it).

             

            Although there still is a learning curve is involved, it is a lot of fun, and you can be up and running making small games within an hour of first starting the application. The community is extremely helpful.

            https://www.scirra.com/

             

            It is Windows only, though. A good Mac alternative is GameSalad, which is a comparable product.

             

            http://gamesalad.com/

             

            If you need a bit more power and prefer to develop 3d games for web and mobile, I'd go for Unity. That has become almost a standard game publishing tool nowadays: https://unity3d.com/

             

            Warning: Unity has a pretty severe learning curve, especially if you have never dealt with 3d creation before. I use Unity and Construct for game dev, and choose the tool depending on the scope and type of game project. A free version of Unity is available. Also many useful plugins (most are not free).

             

            For animation Flash can still be used, although you would be converting your graphics to pure bitmaps. Another approach is to use tools like Spriter (http://www.brashmonkey.com/spriter.htm) and import your animated character in Construct - which will save a lot of memory, and give you many more options to deal with animated characters.

             

            Adobe has nothing that compares to Construct (or GameSalad) in their tool set - although you could use some of their products to create assets for your games, of course.

             

            Alternatively use a tool like Animation Studio to create bone-rigged characters and animate those (my favourite animation tool - the non-pro version is enough for game characters in most cases). Then import into your game as animation frames. Unfortunately, Flash CC does not currently support rigged characters, although it's been mentioned by Adobe for about 8 months now that they are working on it. For character animation in games you really do want a bone tool available to you.

             

            That's not saying Flash is incompetent for game assets (not true, see http://www.adobe.com/inspire/2012/12/ten-steps-flash-cs6.html), and it supports exporting sprite sheets, although for animated characters it does make life far more difficult than it needs to be, since your hand is forced into drawing every single frame of the animation. With a bones-based rig this is not required at all, and it does speed up things quite a bit.

             

            Also, many indie developers (including myself) make use of free tools like InkScape, Krita, Gimp, Audacity, and Blender. Myself I use Photoline for a lot of game asset creation (backgrounds, etc) in combination with Krita. Free and open source is good - they cannot take it away from you, and there is no monthly rental free involved.

             

            In short: avoid InDesign (that's for DTP and traditional and ebook publishing); Adobe does not offer a rapid game making tool**; Flash can be used to develop games for mobile and web, although you are probably better off looking at other options at this point. And finally, there are myriads of options out there in terms of tools and applications that are either free or inexpensive, or open source. Do your research.

             

             

            -----------------------------

            ** well, it depends on your view - a tool like Flash is actually seen by many as a rapid prototyping tool. Construct would then fall in the "warp speed prototyping tool" ;-)