I'm going to be working on a project soon where I'll need to create an explorable environment similar to a game map using HTML5/Canvas and I was wondering where I might find some resources to get started. The closest thing I've found to what I want to do is here: http://www.isogenicengine.com/ (direct link to video: http://vimeo.com/71436906) - The CasinoRPG game is generally what sort of look/feel I'm going for, except I don't need that much interaction, just the ability to move around and look at the buildings. I'm curious to find out what else is out there that can accomplish something like this. I've also looked at http://raphaeljs.com/ and http://snapsvg.io/ but these seem very barebones for what I'm trying to do and will require a lot of environment type development like movement and perspective and such. Isogenic is my current primary option, but I was wanting to find out what else is available.
I'm very novice to HTML5/Canvas development but have a lot experience with Javascript, so I'm just trying to find the best place to start working on this type of project. Thanks!
Related
We all know about Unity, and we all know about UE4. However, I dislike programming in C based languages, and I've always loved Javascript the most.
One thing I've had a hard time finding, and am unsure if it even exists, is a Real Time Development platform (like Unity) but where you can code in Javascript instead. Sure there are things that exist, like Phaser 3, or melon.js, but those are just big huge libraries. I'm talking about something where, for example, you don't have to place sprites using very specific (x,y) coordinates in code, but instead you have a whole engine with drag and drop mechanics with prefabs, etc where you can see what you are building -- LIVE!
Hope this makes sense. Would really like to find something like this.
As far as I know, and please someone correct me if I'm wrong, but I don't believe something like this exists -- but it DEFINITELY should. This would be an amazing achievement to help web developers get into the world of video game development.
I'm trying to find any guidance behind how http://leapsecond2015.com/ was built. Anything to get me a start would be incredibly helpful. I know it was done by droga. I'm not worried about the actual streams but more of the movement and interactivity. I want to attempt a similar project. Not sure if this is an appropriate question for Stack but thought I would ask since I cant find anything on google.
If you open the console, you can see this was done with PixiJS v3
It is an excellent rendering library using WebGL with canvas fallback; you can check it at http://www.pixijs.com/
Pixi provides Flash-like classes like Stage, MovieClip and Sprite.
In Addition, Phaser, a popular game framework is based on Pixi.
What combination of libraries/frameworks would perform best for an HTML5/CSS3/JS app with moving elements? I have definitely done my homework, but I am diving into a world I don't know very well... as far as performance goes at least. Are there principles I should understand before I manipulate, perform logic on and animate DOM elements?
I am going to use AngularJS if I can and should (i'm fairly familiar with the basics now), and my best research has pointed me towards Steroids.js. There are just so many libraries and PhoneGap-like frameworks! Here's what I have found...
This post helped me, but just to get started
Require.js
BindOnce
Titanium
Sencha
Construct 2
WebGL/three.js
FireBase
AngularFire
In short, is there any sort of resource/documentation/reference or testing method of JavaScript load? Or is there any kind of simple answer to this (outside of giving up and learning Objective C, I would really like to be able to use the languages I already know. Thanks for the read :)
In the end, if you want more native functionality to be part of your app, you will have to learn at least two other languages outside of JS: ObjC and Android-flavored Java.
My experience with Cordova was enough to convince me that aiming for a perfectly native-feeling app with Cordova requires you to essentially rebuild a large amount of native functionality in JS, which places you firmly at the mercy of the web core that each OS uses and their limitations. Eventually, you will find yourself using so many libraries to emulate what you can do with the native languages, that the sheer weight of dependencies and their management can very quickly leave you trying to debug shadows.
Even then, there will be things that you have to find hacks for to get near-native functionality for, and performance will hardly ever be as good as a native-language app, especially if you have to load data or resources from outside your application.
My suggestion is that if you must use something like Cordova, give up on the idea that you're going to be creating a 100% native feeling app. If a UI element doesn't work like its native equivalent, don't spend a lot of time trying to force it to work counter to its web roots. Style it appropriately so that users aren't confused by it breaking native conventions, and move on. If you try to fix everything that looks like but acts not /quite/ right, you're going to find yourself in dependency hell and /still/ having to touch native (Java or ObjC) code to get the plugins to work right.
I have a project with that uses flash for most pages. Now the client want to replace the flash with jquery/html. So from where I have to start with?
The project has swf file and it is embedded by swfobject(javascript).
Can someone help me with giving a idea or steps how I can convert the swf to javascript/html?
If the Flash doesn't contain a huge amount of animation/dynamic interaction then I'd say you should follow a process along these lines:
Create HTML documents where the content is structured in a simple, consistent format. If you're not sure about how to do this then I'd suggest you find out some of the basic principles associated with semantic markup (Google is your friend here, there are plenty of great resources - but here's a starter I just came across). Don't worry about elements which involve animation or special user interaction at this stage - just set aside a part of your HTML where such elements need to go for now
Use CSS to layout the document structure with the desired appearance. Do this one step at a time - starting from the largest elements in the page and working your way down to the smallest ones (I find this the best way to build your UI reliably though others may approach it differently).
Once your basic pages are structured correctly and looking good it's time to focus on the animated/interactive aspects. The easiest way to do this is to use other people's work: jQuery plugins. Identify what functionality you need and find plugins that already provide that functionality (i.e. you mentioned a slideshow function - Google for "jQuery slideshow" and play around with the options - there will be plenty).
Realistically, if you're not particularly familiar with HTML/CSS/JS this will not be a simple task for you. Here's a few other thoughts that might help you:
Focus initially on the content structure: if you get this right everything else builds on top of it with much less pain. In addition, Google really likes good document structure so this will go a very small way to getting the site better search result rankings.
Don't worry too much about HTML5: aside from the fact that you have to do extra work to make it fully browser compatible (at least, if you have need of a great deal of browser compatibility), it just isn't really necessary to take advantage of elements like nav or video yet (unless your client won't allow the use of Flash video - but that's for another discussion). Don't bite off more than you can chew.
Be consistent, this is related to the first point above - if you apply structure to your elements consistently across all of your documents you can then take advantage of the same CSS and JS much more easily.
As for the w3schools comments elsewhere on this page, I would say don't use them for tutorials - but they can be a useful reference source for learning HTML elements and attributes and for CSS rules (although there are many other sites who could help here).
Well, I hope this helps you out. Sorry I can't be more specific but I'd need a much more detailed description of your problem before I could give you much more... Good luck
1) Learn Flash (hopefully you've achieved that)
2) Learn Javascript. Learn html5. There are a lot of resources and tutorials.
3) Take the source of flash project. Read it and slowly rewrite to javascript.
4) Once you have translated the project, it is propably suboptimal. Think in javascript to change some flash-like constructions into javascript-like. Do minor optimizations until you're happy with results.
Have you tried Wallaby or Swiffy? Adobe is reacting to the demise of excessive Flash usage in other ways too.
I am looking to create a web based GPS skyplot.
Currently just in the planning stages. Was wondering if anyone knew any javascript libraries or such in which this would be best to start with or have a look at, of if you have done something similar before. I know Flot is decent for plotting but unsure if it would be easy in this scenario.
TLDR: Looking for javascript libraries or other alternatives to create a web based GPS Skyplot.
Further info.
I would like to be able to maintain it all generally in javascript / HTML but am open to other alternatives. I will have a server passing me the GPS details.
Skyplot Examples: For those who don't know.
http://www.gpsoftnav.com/skyplot.html
http://www.novariant.com/resources/technologies/skyplot.cfm#
I came accross:Geographic Information Systems (Stack Exchange) yesterday, would make a good site for these kind of questions.
So if anyone is interested in this please also go make a commit :). Otherwise I am still looking for any feedback on the question.
Is it the graphical issues you are concerned with, or are you intending to also calculate which satellites are visible, and their azimuths and elevations at the given location and time?
If it's just the graphical part you are concerned with, I would use jQuery and Keith Wood's SVG plugin - see http://keith-wood.name/svg.html . This gives you a Javascript handle to Scalable Vector Graphics, for drawing circles, lines and dots on a canvas in the web page. It's simple to use, and the page I've linked to has examples that should help.