I cannot understand the logic/structure/meaning /// That is, I cannot pícture in my mind what stage.canvas stands for!
I have searched stackoverflow for questions involving stage.canvas, but they are about it. They do not explain what it means.
I have also gone to the API documentation > > no way!
I have learnt already one has to define a canvas in the html file
I have also learnt how to reference it from an external .js file
I have already learnt how to draw circles and animate them in the canvas
I know about objects; something about prototypes...
I'm wondering if stage.canvas is valid whether I'm programming with say NetBeans or within Adobe Animate.
I t took me a loong while to "migrate" some physics examples from NetBeans to Adobe Animate. Would someone agree Adobe does a poor job in terms helping beginners?
I'm seeking a minimal example -- I believe five or six lines of code accompanied by an explanation would solve the conundrum -- or tell me where to find info by myself.
This is from github
function init() {
// get a reference to the canvas we'll be working with:
var canvas = document.getElementById("testCanvas");
// create a stage object to work with the canvas.
// this is the top level node in the display list:
var stage = new createjs.Stage(canvas);
This is clear and understandable to me. But from this, how come one can write stage.canvas and what does it mean?
Thanks indeed for any kind help!
new createjs.Stage(canvas) isn't part of native JavaScript. This comes from the CreateJS library. According to their documentation, this appears to be that library's version of the canvas element.
You can look into it more via the link above, but if you're just learning JavaScript I would stick to using it without any libraries. If you want to create a canvas in native JavaScript, try using a canvas element in HTML.
Related
I have been trying to create complex JavaScript shapes (to the end effect of functioning gauges). However, this is a very slow process when creating each individual part programmatically.
I was hoping to find some way to do this more effectively than this. Adobe Animate looked hopeful, but it is very overkill for what I need. I was hoping that there was some software or method to creative JavaScript shapes more effectively than writing each piece of code.
Thank you for any advice you may have.
I guess you mean Canvas since you said JavaScript shapes. I've used htmlcanvas studio for another project and it seemed ok. Have a look here http://www.htmlcanvasstudio.com/
Once your shape is created. Include it into a function so this way you can new the same shape over and over again. It may also be an object of course. Then you can create instances of it with Object.create(square) for example.
function someShape () {
// paste generated code
console.log('your shape has been created');
}
const shape = new someShape();
// or
new someShape();
Afternoon. I have an FLA with a single MovieClip on the stage - the clip is named myThing in the Library and also has an instance name of myThing. On another layer I have the following script:
this.myThing=this.getChildByName("myThing");
console.log(this.myThing);
When I run this in a WebGL project it works as I'd expect and returns a JS object but when I run the same thing in a canvas project (which is what I need to use) it comes back null.
Initially, can anyone explain what the difference is between a WebGL and a canvas project in Adobe Animate CC and how I can get a reference to child clips to control their timelines?
Along with that, can anyone point me to any decent resources on scripting these projects? It seems like no matter what I search for I always end up back at that *!#%£¡ rabbit tutorial that manages to cram very little info into an awful lot of words.
Thanks all, your help is always appreciated :)
So I was being a numpty.
The name property of any asset defaults to null. This is not a problem because the getChildByName() method is not really necessary (for me at least) once I realise that you can just call this.someChild.someMethod().
I got hooked up on the wrong approach because it was the only one I could find examples of. I'm still finding documentation very sketchy and not very helpful when compared to AS3 or even competing JS libraries like Greensock
Also not sure why my first approach worked in WebGL but not canvas. Ah well, onwards and upwards...
WebGL and HTML5 Canvas documents work somewhat differently in Animate CC.
In WebGL, symbols having instance names are accessible as follows:
var mySymbol = this.getChildByName("instance-name");
In Canvas, the same can be done as follows:
var mySymbol = this.instance-name;
Unnamed instances can be referenced using this.getChildAt(index) in both canvas and WebGL.
Once a reference to the required instance is obtained, you can easily control it as desired. (gotoAndPlay()/Stop() etc.)
PS: In canvas, Symbol-instance names are not explicitly set as name properties of corresponding symbols in the output - hence the name property is returned as null.
Ok I have been slowly learning html and javascript for 2 months now. I want to start making games , so far I have made a pop quiz app and number guessing game for android using a wrapper (Andromo). I want to start making platformers so I started looking online for tutorials and getting ebooks. The problem with ebooks and online is they always switch to canvas when it gets to the action games part.
I dont understand why I can't make games using just DOM rather than canvas. The reason I don't like canvas is there are some things that seem like its meant to make you type forever. Most online examples they make a dot on the screen and it takes a ton of code.
EXAMPLE
Javascript DOM to make an image onscreen
<img src="powerman.png" width="50 height="50" >
Now if you do it on canvas its like this
var canvas = document.querySelector("canvas");
var draw = canvas.getContext("2d");
var monster = new Image();
monster.addEventListener("load",loadHandler,false);
monster.src= "powerman.png";
function loadHandler()
{
draw.drawImage(monster,0,0);
That seems like a ton of unnessary coding, I don't understand how canvas is supposed to be faster when it has line after line of coding for every simple thing. And thats just to display an image , when you make a charactor move onscreen forget it on DOM you just put the direction your going in, on canvas you have to clearect() and delete previous image as your moving which is too much .I almost feel as if canvas was made to get people to quit coding.
I enjoy coding but it has to make sense to me. This is why if you know of any ebooks or tutorials of platform game making in pure DOM that will be so helpful.
You're probably not going to find any books on the topic because using the DOM to create a game is a bad idea. However, it might work for some game that are not that graphic intensive. If you're interested, Google made a game without the canvas a few years ago. You can have a look at it: http://macek.github.io/google_pacman/
I know HTML5 canvas fairly well, I know the basics and animation using loops etc.
Demo I'm working with: (click to make shapes) http://henry.brown.name/experiments/box2d/example-canvas.html
What I'm not very familiar with is Box2D. I'm using the Box2DWeb port, I heard it was newer than Box2D-js, I'm not sure which is best.
I know how to initialize the 'world' and I can place objects in the world. I then use Step to animate the world - however to display it on the screen so far I've only been able to get it working with debug draw as it basically does everything for you.
Instead of using debug draw I'd like to use canvas to draw, for example a car instead of just a square. How do I attach the physics of a square to the image of a car? I just can't get my head around integrating canvas with Box2D.
Any tips will be massively appreciated!
Thanks
I spent the last few days trying the same thing.
I found Jonny Strömberg's tutorial, which is not super detailled but by analyzing the code I found how he retrieves the body's position:
var b = world.GetBodyList()
GetBodyList() seems to be an iterative Array, so the next body is accessible through b.m_next.
You can then use
b.GetPosition().x
b.GetPosition().y
b.GetAngle()
to retrieve the body's coordinates.
EDIT: this code is for the Box2dweb library, which I found better documented than Box2djs
If you aren't familiar with Box2D you should check out the documentation at http://www.kyucon.com/doc/box2d/. This should tell you all of the properties you need. To my knowledge the standard way of using Box2D is to attach an image with userData. See this example tutorial for image and Canvas image usage.
http://www.jeremyhubble.com/box2d.html
I had the same question.
here is the documentation of it.
You could use calls like GetBodyList() , GetAngle()and members like m_position to get all that you need to paint whatever using whatever library you want to use on a canvas.
I'd like to make a rotating object (sphere, box, etc.) using only the canvas. But I can't find a tutorial. Help If you saw somewhere or explain how to do it.
Like this example, only without any effects
Hope you like math. 3D effects can always be achieved on a 2D plane if you are willing to write some code.
Some resources that will probably help:
An Intro to Computer Graphics
and for help with the math,
A Book on Linear Algebra
Ah well it's pretty simple in theory. One way is to just set up a timer and then when it fires, clear the canvas and redraw your sphere, box whatever. To make it faster you can cover over a region of the canvas instead of the whole thing. Also you can get png sprites and move them about on the canvas.
I got into this stuff by trying out the pyjamas canvas wrapper, which means you can code in python and then compile it into js, which to me is a lot friendlier.
http://pyjs.org/examples/gwtcanvas/output/GWTCanvasDemo.html
NB the demo is slightly borken but the example code does compile and run perfectly well if you do a git pull.