I am really new to game development, and even newer to phaser. I just discovered the library when I needed to find a way to build my game background. Im building a web based game in javascript. Ive already written all of the code for my game to animate/control the sprites, so I don't want to throw away that code since it works perfectly for what i want. I have my own gameengine, assetmanager etc. What my question was, is that is there a way to use my existing code with phaser? For instance, when I want to add my sprite onto my map, you have to call:
this.player = this.game.add.sprite(100, 300, 'player');
'player' is a tag that refers to the .png file. I want to be able to add my sprite that i have already animated, which is also controlled by keys. Is there a way to do this? Is there a method in the Phaser api that allows this? Or is there a better way to render my JSON data for my tile map? I find that phaser makes everything really easy for you, but i really just want to render my background using it, and be able to add my sprites/collisions on it using the api. I am really new to this, so any advice would be great! Thanks!
Related
Im trying to experiment with product design using javascript, in which the user can select a shirt, mug, box, book for example, and insert a text and/or an image and move it or rotate it or scale it, then they can apply the changes, and a 3D mockup will be generated.
Is this possible using a Javascript library such as Three.js and/or jQuery, or will i need to actually use another technology other than JS, for example WebGL directly ?
I have not dabbled with javascript before as im usually a backend PHP developer, but this idea has caught my attention and i couldnt find enough resources online about it.
Yes this should definitely be doable with three.js
Worst case you can just manipulate a plane with a texture around the product, however I suspect a better way would be manipulating a texture. This would be quite easy if you don't want to manipulate the image in real-time on the 3d mockup, but likely also simple enough to do in real-time.
I'm looking for a way to have several instances of Unity3D running on one web page to display 3D models and interact with them.
Apparently, it used to be possible when Unity still supported the Web Player, but I can't find anything else regarding possibilities of doing this with the new WebGL.
From what I understand, the current way Unity3D works in WebGL revolves around a canvas HTML tag with a specific class (emscripten) and id (canvas). Moreover, one needs to define a JavaScript module, which acts as a global object initializing the UnityLoader.
I got all of that working quite simply with a unique canvas, but I'm struggling with adding extra canvas.
EDIT : gman suggested iframes, but I wonder if there wouldn't be a cleaner way.
I've tried to ask this question before, but I failed completely there. After useful input, I decided to leave that one, and to try again.
I'm looking to create a web-based application where users can draw images built from a set of pre-defined icons. There is a need to be able to save the final image (encoded jpg/png), and also save a "current setup" that can be re-loaded later for further editing (a "settings" file?).
My question : What would be the best approach for this matter? Flash+AS3? HTML5+JS? Something else?
For better understanding of what I want to create, here are 2 screenshots that illustrate in what direction I'm thinking:
The drawing application (made in Flash): http://imgur.com/U4GNKJF
The final created picture: http://imgur.com/aCtxwo1
Thanks in advance, and I really hope I've made my question more clear this time.
Since you need advice...
Draw your icons in some art software (even online) and save as transparent PNG's
Look-up HTML5 Drag & drop tutorials that involve "Canvas". You'll want to meaure the positions of objects dragged (mouse position on Canvas) and their order. The drag function could update a JSON String (this hold entries of items, type, position, etc)
Look-up How to save JSON as text file, also how to parse text file as JSON. This becomes the "settings file".
To save images best use PHP language code. PHP must be installed on the server (most have, or is installable or else get a better host). There are tutorials on how to save an image with content from "snapshot of Canvas"
flash is unsupported on IOS and android mobile browsers and google is giving a lower index to websites using it.
I would use javascript with HTML5 canvas with PIXI.JS ,CreateJS or PANDA.JS.
These libraries make it easier to create the canvas elements you need (draggable objects, buttons ) from sprites and adding event listeners to them.
And drawing graphics on the canvas (lines, shapes).
Since you have a lot of sprites you can pack them in a spritesheet with TexturePacker for faster loading ( and PIXI works great with spritesheets).
You can package this web page to android/ios with phonegap,ionic,crosswalk, cocoonjs etc ( i recommend ionic + crosswalk webview it gives great performance)
for saving i would also use a json file to save the setting . You can use PHP to load and save it.
I am new to Three.js. I have found this library in my search for an Open Source project upon which to build a very simple virtual construction environment. I have in mind something like buildwithchrome which would allow one to create an object from a set of about a dozen parts (which I would be exporting from SolidWorks).
Do you know of such a Three.js project that, just like buildwithchrome, shows a list of parts and allows the user to select, drag, drop, translate, rotate, remove, snap / unsnap parts and move the camera around?
That would be great, since I could use it as a starting point and concentrate my efforts on changing the list of parts and the way the snap together, instead of having work on handling user interactions.
I have found this which comes closest to what I was looking for: Mecabricks. It's not an open source project, but, functionally, it's pretty much exactly what I had in mind and it's built with Three.js.
I am working on a rpg game development. My concern is- I don't want to use any image. I want to draw everything (seriously, everything..) using canvas drawing methods (lineto, bezierCurveTo, quadraticCurveTo etc.)
So, is there anything wrong or any performance overheads in it compared to using images in game development?
Please, I need guidance it this field, because this is my first game... :)
Thanks!