JT library documentation
To find a specific function just use Ctrl+F and use keywords (each function has a description)
Here's an index of all available functions organized by their category:
- Canvas
- Loop
- Assets
- Sound
- Draw
- Math
- Collision
- Particles
- Gamepad
- Keyboard
- Mouse
- Touch
- Mouse and Touch
- Stats
- Keyboard.js (external library)
- Backward compatibility
- JTE (Only works in JT Engine)
-
jt.w(w)
jt.width(w) - Resize the width of the canvas
-
jt.h(h)
jt.height(h) - Resize the height of the canvas
- jt.resize(w,h,camsReset)
- Resize the width and height of the canvas (camsReset is optional and true by default, it resets all virtual cameras after resizing)
- jt.fullscreen(boolean,fake)
- Get or set the canvas fullscreen state (true or false), the fake is also a boolean, a fake fullscreen is used by default so it works across all browser, setting it false will use the normal fullscreen used in chrome/firefox (fake is true by default)
- jt.autoResize(boolean,w,h)
- Turn on or off resizing canvas each frame (Default is false)
- jt.addH(h)
- Get or set the additional height to the canvas, it isn't part of the game, doesn't affect jt.height() and it is useful to add mobile controls
- jt.keepRatio(bool)
- Get or set the default ratio when going fullscreen (true means the width and height ratio will be the same, false means it will take the whole page regardless of stretching on the width/height)
- jt.ratio()
- Get the width/height ratio of the canvas
- jt.setId(id)
- Set the html id of the canvas used by JT (Default is "can")
- jt.smoothing(boolean)
- Smooth pixels in canvas (Default is false)
- jt.border(boolean,x,y,color)
- Turn on or off canvas border and choose width, height and color (the black outline doesn't count)
- jt.cursor(style)
- Change the current cursor style or use true/false (it will return false if the cursor style is none, otherwise it will return the cursor style as a string)
- jt.version
- Get the version (not a function)
- jt.focus
- Get the focus state (if the user has clicked on the canvas and is focused on it, also not a function)
- jt.alarm(name,time,autoDelete)
- Add an alarm and how much time (in frames) until it's done, if time is not specified it makes it 1 second long, autoDelete specifies if the alarm should be destroyed once it gets lower than 0 (by default it is false)
- jt.checkAlarm(name,del)
- Check if an alarm is done and if you delete it (by default del is false so it won't delete)
- jt.delAlarm(name)
- Deletes an alarm, return true if the alarm's time was below or equal to 0 or false if it was above 0, if no name is specified it will delete all alarms
- jt.isAlarm(name)
- Check if a specific alarm exists, if no name is specified it checks if at least one alarm exists
-
jt.getAlarm(name)
jt.getTime(name) - Get the time remaining of an alarm, or undefined if it does not exist
-
jt.getAlarmDuration(name)
jt.getAlarmDur(name)
jt.getAlarmMax(name)
jt.getTimeMax(name) - Get the original duration of an alarm (how much time (in frames) until it's done), or undefined if it does not exist
- jt.pauseAlarm(name,pause)
- Set the pause of an alarm, if no name is specified it will pause all alarm (by default pause is true)
- jt.playAlarm(name,pause)
- Set the opposite of the pause (so if it is playing) of an alarm, if no name is specified it will play all alarm (by default play is true)
- jt.pausedAlarm(name)
- Get the pause of an alarm, if no name is specified it will return true if they are all paused
- jt.playingAlarm(name)
- Get the opposite of the pause (so if it is playing) of an alarm, if no name is specified it will return true if they are all playing
- jt.alarms(alarms)
- Get or set the array of alarms
- jt.shake(force,duration,reduce)
- Shake the canvas (if the cam is active) with force, duration and how much it is reduced each frame
-
jt.shaking()
jt.isShaking() jt.isShaking() - Get true or false if the screen is shaking with jt.shake()
-
jt.shakeStop()
jt.stopShake() - Stop shaking the screen
-
jt.combo(arrCombo,reset)
jt.checkCombo(arrCombo,reset) - Check if a combination of keys has been pressed (keyboard only)
- jt.resetCombo()
- Reset the current combination of keys pressed (keyboard only)
- jt.comboTimer(frames)
- Set the max time allowed between each keys for a combo (keyboard only) (Default is 30 frames)
- jt.comboLength(len)
- Set the max number of keys in a combo (keyboard only) (Default is 8)
- jt.getCombo(len)
- Get the current combo with a specified length (keyboard only) (Default is max length)
- jt.fps(fps)
- Get or set the current fps
-
jt.frame(frame)
jt.frames(frame) - Get or set the current frame
- jt.sec(sec)
- Get or set the current second
- jt.pauseJt(boolean)
- Pause the update function of JT
- jt.stopJt(boolean)
- Stops the update function of JT and cannot be started again
- jt.waveX(num)
- Get or set the waveX number, which goes from 0 to 1 in 1 second
- jt.waveY(num)
- Get the waveY number, which goes from -1 to 1 then back to -1, all in 1 second. If you put a number, it will be a temporary waveX that will wrap from 0 to 1.
- jt.waveYPos(num)
- Get or set the waveY number, which goes from 0 to 1 then back to 0 in 1 second. If you put a number, it will be a temporary waveX that will wrap from 0 to 1.
-
jt.debug(boolean)
jt.debugging(boolean) - Get or set the debug mode, which shows debug objects to quickly help in development
-
jt.addDebug(obj)
jt.addDebug(x,y,w,h,color,rotation)
jt.addDebug(text,x,y,color,textAlign,fontSize,rotation,maxChars,newLineHeight) - Create a debug object for one frame
-
jt.addDebugStay(obj)
jt.addDebugStay(x,y,w,h,color,rotation)
jt.addDebugStay(text,x,y,color,textAlign,fontSize,rotation,maxChars,newLineHeight) - Create a debug object that stays until deleted
-
jt.delDebug()
jt.delDebugs()
jt.clearDebug()
jt.clearDebugs() - Remove all debug objects
- jt.debugs()
- Get all debug objects
-
jt.newImage(src,name,x,y,visible)
jt.loadImage(src,name,x,y,visible) - Load image to be drawn later (x,y are optional starting coordinates)
-
jt.newSound(src,name,repeat,volume)
jt.loadSound(src,name,repeat,volume) - Load sound to be played later (repeat so that it will automatically loop, volume is optional and from 0 to 1)
-
jt.newAnim(src,name,frames,speed,x,y,visible)
jt.loadAnim(src,name,frames,speed,x,y,visible) - Load animation to be played later (animation is an image with all frames side by side, you need to specify the number of frames and the speed in fps)
- jt.loaded()
- Return a boolean, true if the library is loading assets and false otherwise (useful after adding assets while the game is running)
- jt.images()
- Get all images loaded
- jt.sounds()
- Get all sounds loaded
- jt.anims()
- Get all animations loaded
- jt.volume(volume,sound)
- Get or set the general volume from 0 to 1 (if you only put the sound it will return the volume of the sound, sound is optional which will set the volume of that sound, so playing a sound with a volume of 0.5 and with a general volume of 0.5 will play the sound at a volume of 0.25)
- jt.mute(boolean)
- Get or set the volume (from 0 to 1)
-
jt.play(name,volume)
jt.sound(name,volume) - Play a sound from it's current time (volume is optional which will set this sound volume from 0 to 1 where 0 is muted and 1 is the value of the general volume)
- jt.pause(name)
- Pause a sound
- jt.stop(name)
- Pause a sound and set the current time at 0
- jt.stopAll()
- Stop all sounds (pause and set the current time to 0)
- jt.stopPlay(name,volume)
- Pause a sound and set it's current time at 0 then play it (Best way to ensure a sound will be played from the start, volume is optional which will set this sound volume from 0 to 1 where 0 is muted and 1 is the value of the general ovlume)
- jt.repeat(name,bool)
- Get or set a sound to repeat
- jt.playing(name)
- Check if a sound is playing (returns true or false), if name is not specified it returns if all sounds are playing
- jt.paused(name)
- Check if a sound is paused (returns true or false), if name is not specified it returns if all sounds are paused
- jt.cam(num)
- Get or set the current virtual camera x,y,w,h and the position x,y,w,h (num is optional and is the camera you want to get, by default it is the current camera which is 0)
-
jt.camCurr(num)
jt.currCam(num)
jt.camCurrent(num)
jt.currentCam(num)
jt.camChange(num)
jt.changeCam(num) - Get or set the current camera (goes from 0 to 10)
-
jt.camReset(num)
jt.camDefault(num) - Reset the current virtual camera (num is optional and is the camera you want to get, by default it is the current camera which is 0)
-
jt.camsReset()
jt.camsDefault() - Reset all virtual cameras
- jt.camActive(boolean,num)
- Turn on or off the virtual camera (num is optional and is the camera you want to get, by default it is the current camera which is 0)
- jt.inCanvas(x,y,w,h)
- Check if a rectangle is partially inside the canvas
- jt.inCanvasFull(x,y,w,h)
- Check if a rectangle is fully inside the canvas
- jt.inCam(x,y,w,h,num)
- Check if a rectangle is partially inside the camera (num is optional and is the camera you want to get, by default it is the current camera which is 0)
- jt.inCamFull(x,y,w,h,num)
- Check if a rectangle is fully inside the camera (num is optional and is the camera you want to get, by default it is the current camera which is 0)
- jt.camToX(x,num)
- Get the camera horizontal value of a non-camera horizontal value (num is optional and is the camera you want to get, by default it is the current camera which is 0)
- jt.camToY(y,num)
- Get the camera vertical value of a non-camera vertical value (num is optional and is the camera you want to get, by default it is the current camera which is 0)
- jt.xToCam(x,num)
- Get the non-camera horizontal value of a camera horizontal value (num is optional and is the camera you want to get, by default it is the current camera which is 0)
- jt.yToCam(y,num)
- Get the non-camera vertical value of a camera vertical value (num is optional and is the camera you want to get, by default it is the current camera which is 0)
- jt.alpha(alpha)
- Get or set the canvas alpha (transparency from 0 to 1)
-
jt.bg(color)
jt.background(color) - Draw a background color
- jt.color(col,type)
- Get or set the default color (type is optional but will specify fill or stroke style, stroke being for outline)
-
jt.clear(x,y,w,h)
jt.erase(x,y,w,h) - Clear a part of the canvas (if there's no parameters, it will clear the entire canvas)
- jt.linear(x1,y1,x2,y2,colors,offsets)
- Return a linear gradient color (offsets is optional but will allow to control the offsets manually)
- jt.radial(x1,y1,d1,x2,y2,d2,colors,offsets)
- Return a radial gradient color (offsets is optional but will allow to control the offsets manually)
- jt.shape(obj)
- Draw a shape based on an object
- jt.point(x,y,color,rotation)
- Draw a point (1px wide and 1px tall)
-
jt.rect(x,y,w,h,color,rotation)
jt.rectB(x,y,w,h,color,rotation,lineW) - Draw a rectangle (or it's outline with rectB)
-
jt.circle(x,y,diameter,color)
jt.circleB(x,y,diameter,color,lineW) - Draw a circle (or it's outline with circleB)
-
jt.ellipse(x,y,diameterX,diameterY,color,rotation)
jt.ellipseB(x,y,diameterX,diameterY,color,rotation,lineW) - Draw an ellipse (or it's outline with ellipseB)
- jt.line(x1,y1,x2,y2,width,color,rotation)
- Draw a line
-
jt.font(fontName,fontSize,color)
jt.fontName(name)
jt.fontSize(size) - Set the font name and font size (color is optional)
-
jt.text(text,x,y,color,textAlign,fontSize,rotation,maxChars,newLineHeight)
jt.textB(text,x,y,color,textAlign,fontSize,rotation,lineW,maxChars,newLineHeight) - Draw text (all parameters from textAlign are optional, maxChars and newLineHeight are for autoformatting long text)
- jt.textW(text)
- Get width of text (by default will pass "a")
- jt.textH()
- Get height of text (it will return font size which is the same)
- jt.align(align)
- Get or set text alignment
-
jt.baseLine(baseLine)
jt.baseline(baseLine) - Get or set text baseLine
- jt.image(name,x,y,w,h,rotation,sX,sY,sW,sH)
- Get or set text alignment
- jt.anim(name,x,y,w,h,rotation)
- Get or set text alignment
- jt.animPlay(name)
- Play an animation (unpause it)
- jt.animPause(name)
- Pause an animation (pause it)
- jt.animStop(name)
- Stop an animation (pause it and start it back)
- jt.animStopPlay(name)
- Stop an animation then play it (pause it and start it back then play it, effectively restarting it)
- jt.animPaused(name)
- Get animation pause status as a boolean
- jt.animFrame(name,frame)
- Get or set the current animation frame
- jt.animFrames(name)
- Get total number of animation frames
- jt.animSpeed(name,speed)
- Get or set the current animation speed
- jt.clip(shape,y,w,h,r)
- Clip a shape containing the values in the variable shape so the next drawings will only appear inside the clip until jt.unclip() is called (or clip a rectangle using shape as the x and the rest of the values)
- jt.clips(shapes)
- Clip an array of shapes which each contains an object with all the attributes for a shape so the next drawings will only appear inside the clips until jt.unclip() is called
- jt.unclip()
- Unclip a previous clip in the canvas
- jt.clipPoint(x,y)
- Clip a point in the canvas (or clip a point using the x as an object containing all the attributes)
- jt.clipLine(x1,y1,w1,h1,lineW,r)
- Clip a line in the canvas (or clip a line using the x as an object containing all the attributes)
- jt.clipRect(x,y,w,h,r)
- Clip a rectangle in the canvas (or clip a rectangle using the x as an object containing all the attributes)
- jt.clipCircle(x,y,d)
- Clip a circle in the canvas (or clip a circle using the x as an object containing all the attributes)
- jt.clipEllipse(x,y,dX,dY,r)
- Clip an ellipse in the canvas (or clip an ellipse using the x as an object containing all the attributes)
-
jt.filter(css,override)
jt.filters(css,override) - Add a custom css filter to the canvas, add a space between filters to multiple of them, for a list of all the possible filters, click here (override is optional and it is used to add or override previous filters, by default it is true)
-
jt.resetFilter()
jt.resetFilters()
jt.noFilter()
jt.noFilters()
jt.none() - Reset and remove current filters
- jt.blur(pixels)
- Add a blur filter to the canvas by pixels
- jt.brightness(percent)
- Add a brightness filter to the canvas by percent
- jt.contrast(percent)
- Add a contrast filter to the canvas by percent
-
jt.shadow(x,y,blur,color)
jt.dropShadow(x,y,blur,color) - Add a shadow filter to the canvas with a X and Y offset (blur is optional it is used to add blur radius in pixels, color is optional it is used to add a color to the shadow which is black by default)
-
jt.gray(percent)
jt.grayscale(percent)
jt.grayScale(percent) - Add a grayscale filter to the canvas by percent
-
jt.hue(angle)
jt.hueRotate(angle) - Add a hue-rotate filter to the canvas by the angle (red is 0, lime is 90, lightblue is 180, purple is 270)
- jt.invert(percent)
- Add an invert filter to the canvas by percent
- jt.opacity(percent)
- Add an opacity filter to the canvas by percent
- jt.saturate(percent)
- Add a saturate filter to the canvas by percent
- jt.sepia(percent)
- Add a sepia filter to the canvas by percent
- jt.scale(scaleX,scaleY,x,y,w,h)
- Scale the entire canvas from a specific point (it's important to scale the opposite after so it doesn't keep spinning)
- jt.rotate(rotation,x,y,w,h)
- Rotate the entire canvas from a specific point (it's important to rotate the opposite after so it doesn't keep spinning)
- jt.save()
- Save the canvas current state (contains all canvas transformation, mostly used to save before using clips or jt.scale() or jt.rotate())
- jt.restore()
- Restore the canvas to a previous state (contrains all canvas transformation, mostly used to restore after using clips or jt.scale() or jt.rotate())
- jt.random(min,max,interval)
- Get a random number (interval is optional but will give decimals)
- jt.odds(min,max,winningValue,losingValue)
- Return the winning or losing value if the random number generated is the same as the min (so jt.odds(1,3,"Win","Lose") will give "Win" 1 out of 3 times, also by default losingValue is undefined and if losingValue and winningValue are undefined it will return true or false)
- jt.between(num,min,max)
- Will return if a number is between a min and a max
- jt.stay(num,min,max)
- Will return the number that stays between a min and a max
- jt.wrap(num,min,max)
- Will return the number that wraps around a min and a max for numbers (numbers that changes by anything,so max+1 will give min+1 and max+0 will give min)
-
jt.wrapIndex(num,min,max)
jt.wrapId(num,min,max)
jt.index(num,min,max) - Will return the number that wraps around a min and a max for indexes (indexes only changes by 1,so max+1 will give min)
- jt.choose(array)
- Choose an item from an array
- jt.abs(num)
- Get the absolute value of the number (always positive)
- jt.sign(num)
- Get the sign value of the number (-1 or 0 or 1)
-
jt.digits(num,digits)
jt.decimals(num,digits) - Get the number as a string with the desired amount of digits (0 by default)
-
jt.dist(obj1,obj2)
jt.distP(x1,y1,x2,y2) - Get the distance from 2 objects or 2 points
-
jt.angle(obj1,obj2)
jt.angleP(x1,y1,x2,y2) - Get the angle from 2 objects or 2 points (0 is north and goes clockwise up to 359)
-
jt.angleX(angle)
jt.ratioX(angle) - Get the horizontal ratio of an angle using jt.angle()
-
jt.angleY(angle)
jt.ratioY(angle) - Get the vertical ratio of an angle using jt.angle()
- jt.pointsFromLine(line,color,number);
- Return an array of points from a line, color is optional to add a color attribute to the points (by default no colors), numbers is optional to specify number of points (by default it is the length of the line)
- jt.rectsFromLine(line,width,height,color,number);
- Return an array of rectangles (with the width and height specified) from a line, color is optional to add a color attribute to the points (by default no colors), numbers is optional to specify number of points (by default it is the length of the line)
- jt.circlesFromLine(line,diameter,color,number);
- Return an array of circles (with the diameter specified) from a line, color is optional to add a color attribute to the points (by default no colors), numbers is optional to specify number of points (by default it is the length of the line)
- jt.ellipsesFromLine(line,diameterX,diameterY,color,number);
- Return an array of elipses (with the diameterX and diameterY specified) from a line, color is optional to add a color attribute to the points (by default no colors), numbers is optional to specify number of points (by default it is the length of the line)
- jt.arr(length,val)
- Create an array with the specified length (val is optional and undefined by default)
-
jt.matrix(w,h,val)
jt.arr2D(w,h,val) - Create a 2d array/matrix with the specified width and height (val is optional and undefined by default)
- jt.copyArr(arr)
- Get a copy of the array passed (useful to get a copy of an array rather than a reference like Javascript does by default)
- jt.floor(num)
- Get the number to the closest lower integer (rounding down)
- jt.round(num)
- Get the number to the closest integer (rounding)
-
jt.ceil(num)
jt.ceiling(num) - Get the number to the closest higher integer (rounding up)
- jt.lerp(percent,start,end)
- Get a value with a decimal percentage (from 0 to 1)
-
jt.p(percent,start,end)
jt.percent(percent,start,end) - Get a value with a percentage (from 0 to 100)
-
jt.pX(percent,start,end)
jt.percentX(percent,start,end) - Get an x coordinate with a percentage (start and end are 0 and width by default)
-
jt.pY(percent,start,end)
jt.percentY(percent,start,end) - Get an y coordinate with a percentage (start and end are 0 and height by default)
-
jt.c(obj1,obj2)
jt.col(obj1,obj2) - Check collision between 2 objects, it will automatically detect which ones with their attributes (will return true or false)
-
jt.cPoint(point1,point2)
jt.cPointPoint(point1,point2)
jt.cPointLine(point,line)
jt.cPointRect(point,rect)
jt.cPointCircle(point,circle)
jt.cPointEllipse(point,ellipse) - Check collision with a Point(x,y) and another shape (will return true or false, in the demo it is drawn to be bigger, but only it's x and y coordinates will cause a reaction)
-
jt.cLine(line1,line2)
jt.cLineLine(line1,line2)
jt.cLinePoint(line,point)
jt.cLineRect(line,rect)
jt.cLineCircle(line,circle)
jt.cLineEllipse(line,ellipse) - Check collision with a Line(x1,y1,x2,y2) and another shape (will return true or false, the line will only consider it a collision if the center of the line is touching, the line width is only visual and to make it easier to see)
-
jt.cRect(rect1,rect2)
jt.cRectRect(rect1,rect2)
jt.cRectPoint(rect,point)
jt.cRectLine(rect,line)
jt.cRectCircle(rect,circle)
jt.cRectEllipse(rect,ellipse) - Check collision with a Rect(x,y,w,h) and another shape (will return true or false)
-
jt.cCircle(circle1,circle2)
jt.cCircleCircle(circle1,circle2)
jt.cCirclePoint(circle,point)
jt.cCircleLine(circle,line)
jt.cCircleRect(circle,rect)
jt.cCircleEllipse(circle,ellipse) - Check collision with a Circle(x,y,d) and another shape (will return true or false)
-
jt.cEllipse(ellipse1,ellipse2)
jt.cEllipseEllipse(ellipse1,ellipse2)
jt.cEllipsePoint(ellipse,point)
jt.cEllipseLine(ellipse,line)
jt.cEllipseRect(ellipse,rect)
jt.cEllipseCircle(ellipse,circle) - Check collision with an Ellipse(x,y,dX,dY) and another shape (will return true or false)
- jt.cAssets(name1,name2)
- Check collision of 2 assets and return true or false (check their rectangle bounding box)
-
jt.addPart(obj)
jt.addPart(x,y,w,h,frames,wRate,hRate,alpha,alphaRate,
vX,vY,aX,aY,c,cRate,cMax,r,rRate,o,oRate,image,anim,id) - Add a particle, all of the values are optional (you can make circles by setting h as 0 and hRate as 0, parameters that end with Rate are added each frame to their initial parameters, vX and vY are velocity which change position each frame, aX and aY are acceleration which changes velocity each frame, o is the outline width which is undefined by default, image and anim are to draw an image or anim instead, id is to identify a particle)
-
jt.parts(id)
jt.getParts(id) - Return an array of the particles (if you send an id, it will only return particles that also have that id)
- jt.drawParts()
- Draw all particles from their centers and not their top left corner
- jt.drawPart(index)
- Draw one particle from their centers and not their top left corner (you have to specify an index, which you can get by looping through jt.parts(), if there is no index, jt.drawParts() will be called instead)
-
jt.delParts()
jt.clearParts() - Delete/clear all particles
-
jt.padConnected(controller)
jt.pConnected(controller) - Check if a controller is connected
-
jt.pads()
jt.gamepads() - Return an array of all the gamepads info
- jt.buttonName(button)
- Return the button name for a button's number
- jt.getButtons(controller)
- Return all the buttons down for a controller
-
jt.padCheck(button,controller,and)
jt.pCheck(button,controller,and) - Check if a button is down on a controller and returns true or false (button can also be an array of buttons, if and is true it will return true if all of them are down)
-
jt.padPress(button,controller,and)
jt.pPress(button,controller,and) - Check if a button is pressed on a controller and returns true or false (pressing only lasts 1 frame, button can also be an array of buttons, if and is true it will return true if all of them are down)
-
jt.padValue(button,controller)
jt.pValue(button,controller) - Check the value of a button on the controller and returns from 0 to 1 (returns 0 or 1 if it is down, only leftTrigger and rightTrigger will return between 0 and 1 on how hard you press)
-
jt.padRelease(button,controller)
jt.pRelease(button,controller) - Release a button on the controller for 1 frame (button can also be an array of button or empty to release all)
-
jt.padStick(stick,controller)
jt.pStick(stick,controller)
jt.padAxes(stick,controller)
jt.pAxes(stick,controller) - Returns an array of the x and y position of the gamepad stick (from -1 to 1, stick is 0 by default which is the left stick and 1 is for the right stick)
-
jt.padDirCheck(direction,stick,controller)
jt.pDirCheck(direction,stick,controller) - Return true or false if the gamepad's stick is facing that direction (left,right,up,down or all) (stick is 0 by default which is the left stick and 1 is for the right stick)
-
jt.padDirPress(direction,axes,controller)
jt.pDirPress(direction,axes,controller) - Return true or false if the gamepad's stick is facing that direction (left,right,up,down or all) (pressing only lasts 1 frame, stick is 0 by default which is the left stick and 1 is for the right stick)
-
jt.padDirReset(stick,controller)
jt.pDirReset(stick,controller)
jt.padDirRelease(stick,controller)
jt.pDirRelease(stick,controller) - Reset the gamepad's stick's direction (stick is both by default, 0 is the left stick and 1 is for the right stick)
-
jt.padThreshold(direction,stick,controller,val)
jt.pThreshold(direction,stick,controller,val) - Get or set with val the threshold for a direction (left,right,up,down or all), this only affects jt.padDirCheck() and jt.padDirPress() (stick is 0 by default which is the left stick and 1 is for the right stick, val is optional and used for setting a threshold and should be between 0 and 1 which by default is 0.5)
-
jt.keyCheck(keyName,and)
jt.kCheck(keyName,and)
jt.keyDown(keyName,and)
jt.kDown(keyName,and) - Check if a key on the keyboard is down and returns true or false (if keyName is undefined, it will check any keys, keyName can also be an array of keyNames, which will return true if one of them is down, if and is true it will return true if all of them are down)
-
jt.keyPress(keyName,and)
jt.kPress(keyName,and) - Check if a key on the keyboard is down and returns true or false (if keyName is undefined, it will check any keys, pressing only last 1 frame, keyName can also be an array of keyNames, which will return true if one of them is pressed, if and is true it will return true if all of them are pressed)
-
jt.keyRelease(keyName)
jt.kRelease(keyName) - Release a key on the keyboard for 1 frame (keyName can also be an array of all keys or empty to release all, keyName can also be an array of keyNames which can be useful to call after a jt.keyPress() so it doesn't fire another one in the same frame)
-
jt.simKeyDown(keyName)
jt.simKDown(keyName)
jt.simDown(keyName) - Simulate a key being held down (This is useful to make a game quickly playable on mobile by adding touch buttons that simulates the keyboard)
-
jt.simKeyUp(keyName)
jt.simKUp(keyName)
jt.simUp(keyName) - Simulate a key being released (This is useful to make a game quickly playable on mobile by adding touch buttons that simulates the keyboard)
-
jt.keys(keys)
jt.k(keys) - Set or get the array of keys object that are down that contains the keyCode and if they are pressed
-
jt.keysList(byName)
jt.kList(byName) - Get the list of keyCodes and keyNames (entering a keyName will give the keyCode, if byName is true, it will be reversed list)
-
jt.keyName(keyCode)
jt.kName(keyCode) - Get the keyName from a keyCode
-
jt.keyCode(keyName)
jt.kCode(keyName) - Get the keyCode from a keyName
-
jt.mouseCheck(obj)
jt.mouseCheck(x,y,w,h,cam,btn)
jt.mCheck(obj)
jt.mCheck(x,y,w,h,cam,btn) - Returns true or false if the mouse is held down inside a rectangle (cam specifies if it should be affected by the camera, by default it is the current camera active state and btn specifies which mouse button it checks, by default it is 0, the left click)
-
jt.mousePress(obj)
jt.mousePress(x,y,w,h,cam,btn)
jt.mPress(obj)
jt.mPress(x,y,w,h,cam,btn) - Returns true or false if the mouse is pressed inside a rectangle (pressing only lasts 1 frame, cam specifies if it should be affected by the camera, by default it is the current camera active state and btn specifies which mouse button it checks, by default it is 0, the left click)
-
jt.mouseIn(obj)
jt.mouseIn(x,y,w,h,cam)
jt.mIn(btn)jt.mIn(x,y,w,h,cam) - Returns true or false if the mouse is inside a rectangle (cam specifies if it should be affected by the camera, by default it is the current camera active state)
-
jt.mouseDown(btn)
jt.mDown(btn) - Returns true or false if a mouse button is held down (by default it is 0, the left click)
-
jt.mouseRelease()
jt.mRelease() - Releases all mouse buttons
-
jt.mouseX()
jt.mX() - Returns the x coordinate of the mouse
-
jt.mouseCamX()
jt.mCX() - Returns the x coordinate of the mouse relative to the camera (the position only updates after moving the mouse, if you need to update it each frame, end the update function with a jt.camActive(true))
-
jt.mouseY()
jt.mY() - Returns the y coordinate of the mouse
-
jt.mouseCamY()
jt.mCY() - Returns the y coordinate of the mouse relative to the camera (the position only updates after moving the mouse, if you need to update it each frame, end the update function with a jt.camActive(true))
-
jt.mouseScroll()
jt.mScroll() - Returns a scroll value of the mouse (the scroll value is 1 per notch per frame, positive when scrolling down and negative when scrolling up)
-
jt.mousePrevent(prevent)
jt.mPrevent(prevent)
jt.mouseRightClick(prevent)
jt.mRightClick(prevent) - Get or set with true or false if a right click will open the context menu or if it will prevent it
-
jt.touchCheck(obj)
jt.touchCheck(x,y,w,h,cam,fingers)
jt.tCheck(obj)
jt.tCheck(x,y,w,h,cam,fingers) - Returns true or false if a touch is held down inside a rectangle (cam specifies if it should be affected by the camera, by default it is the current camera active state and fingers is the number of fingers needed to return true, by default it is 1)
-
jt.touchPress(obj)
jt.touchPress(x,y,w,h,cam,fingers)
jt.tPress(obj)
jt.tPress(x,y,w,h,cam,fingers) - Returns true or false if a touch is pressed inside a rectangle (pressing only lasts 1 frame, cam specifies if it should be affected by the camera, by default it is the current camera active state and fingers is the number of fingers needed to return true, by default it is 1)
-
jt.touchDown()
jt.tDown() - Returns true or false if a touch is held down in the canvas
-
jt.touchRelease()
jt.tRelease() - Releases all touch buttons
-
jt.touchX(touch)
jt.tX(touch) - Returns the x coordinate of a touch (touch is 0 by default, which is the last touch, if the user is not touching it will return undefined)
-
jt.touchCamX(touch)
jt.tCX(touch) - Returns the x coordinate of a touch relative to the camera (touch is 0 by default, which is the last touch, if the user is not touching it will return undefined, the position only updates after touching, if you need to update it each frame, end the update function with a jt.camActive(true))
-
jt.touchY(touch)
jt.tY(touch) - Returns the y coordinate of a touch (touch is 0 by default, which is the last touch, if the user is not touching it will return undefined)
-
jt.touchCamY(touch)
jt.tCY(touch) - Returns the y coordinate of a touch relative to the camera (touch is 0 by default, which is the last touch, if the user is not touching it will return undefined, the position only updates after touching, if you need to update it each frame, end the update function with a jt.camActive(true))
-
jt.isMobile()
jt.mobile() - Returns true or false if the user is using a mobile device
- jt.check(x,y,w,h,cam,btnFingers)
- Returns true or false if a mouse button or a touch is held down inside a rectangle (cam specifies if it should be affected by the camera, by default it is the current camera active state and btnFingers specifies which mouse button it checks, by default it is 0, the left click, or btnFingers is the number of fingers needed to return true, by default it is 1)
- jt.press(x,y,w,h,cam,btnFingers)
- Returns true or false if a mouse button or a touch is pressed inside a rectangle (pressing only lasts 1 frame, cam specifies if it should be affected by the camera, by default it is the current camera active state and btnFingers specifies which mouse button it checks, by default it is 0, the left click, or btnFingers is the number of fingers needed to return true, by default it is 1)
- jt.down(btn)
- Returns true or false if a mouse button or a touch is held down (by default it is 0, the left click)
- jt.release()
- Release all mouse and touch buttons
- jt.x(touch)
- Returns the x coordinate of the mouse or a touch (touch is 0 by default, which is the last touch, if the user is not touching it will return undefined, the position only updates after touching, if you need to update it each frame, end the update function with a jt.camActive(true))
-
jt.camX(touch)
jt.cX(touch) - Returns the x coordinate of the mouse or a touch relative to the camera (touch is 0 by default, which is the last touch, if the user is not touching it will return undefined, the position only updates after touching, if you need to update it each frame, end the update function with a jt.camActive(true))
- jt.y(touch)
- Returns the y coordinate of the mouse or a touch (touch is 0 by default, which is the last touch, if the user is not touching it will return undefined, the position only updates after touching, if you need to update it each frame, end the update function with a jt.camActive(true))
-
jt.camY(touch)
jt.cY(touch) - Returns the y coordinate of the mouse or a touch relative to the camera (touch is 0 by default, which is the last touch, if the user is not touching it will return undefined, the position only updates after touching, if you need to update it each frame, end the update function with a jt.camActive(true))
- jt.drawStats(showFps,showDrawn,showAllDrawn)
- Draw a small rectangle in the top left corner containing statistics about performance (All parameters are optional and true by default,showFps shows the fps, showDrawn the number of drawn objects on the number of all object (shows how many have been clipped off-screen), showAllDrawn is the same as showDrawn but shows them separately, you should always call after drawing everything, also it doesn't count it's own shape and text)
- jt.logStats(showFps,showDrawn,showAllDrawn)
- Same as jt.drawStats() but inside the console (All parameters are optional and true by default,showFps shows the fps, showDrawn the number of drawn objects on the number of all object (shows how many have been clipped off-screen), showAllDrawn is the same as showDrawn but shows them separately, you should always call after drawing everything)
- keyboard.start(msg,str,lines,size)
- Opens up the keyboard and pauses JT after this update, msg is the message that the user sees (by default "Write here..."), str is the message that the user writes (by default empty), lines is the number of lines of inputs (25 chars per line, 1 by default), size is the font size (24 by default)
- jt.xCam(x,num)
- Same as xToCam, it's more intuitive
- jt.yCam(y,num)
- Same as yToCam, it's more intuitive
- jt.camX(x,num)
- Same as camToX, it's more intuitive
- jt.yCam(y,num)
- Same as camToY, it's more intuitive
- jt.pixelRate(rate)
jt.pR(rate) - Changing the pixel rate of the canvas, but it changed too many factors
- jt.revFullscreen()
- It was used to make the canvas size equals to the opposite of the width and height, but it was not useful
- jt.addAlarm(name,time)
- Same as jt.alarm(name,time)
-
jt.wavePi(num)
jt.waveTau(num) - Get or set the wavePi number, which goes from 0 to Math.PI*2, but now waveX simply goes from 0 to 1
- jt.wrapVal(num,min,max)
- Same as jt.wrap(num,min,max)
- jt.colAssets(name1,name2)
- Same as jt.cAssets(name1,name2)
- jt.changeSoundSrc(soundSrc,repeat)
- It was used to allow sounds on safari, but it was too complicated to use
- jt.repeatSoundSrc(repeat)
- It was used to allow sounds on safari, but it was too complicated to use
- jt.soundSrc()
- It was used to allow sounds on safari, but it was too complicated to use
- jt.changeMusicSrc(musicSrc,repeat)
- It was used to allow sounds on safari, but it was too complicated to use
- jt.repeatMusicSrc(repeat)
- It was used to allow sounds on safari, but it was too complicated to use
- jt.musicSrc()
- It was used to allow sounds on safari, but it was too complicated to use
- jt.camactive(bool)
- Same as jt.camactive(bool)
- jt.fontsize(size)
- Same as jt.fontSize(size)
- jt.animP(name)
- Same as jt.animPause(name)
- jt.animF(name,frame)
- Same as jt.animFrame(name,frame)
- jt.animS(name,speed)
- Same as jt.animSpeed(name,speed)
- jt.id(id)
- Can be done easily in native javascript
- jt.class(className)
- Can be done easily in native javascript
- jt.webRatio()
- Same as jt.ratio()
- jt.htmlRatio()
- Same as jt.ratio()
- jt.cRectC(rect,circle)
- Same as jt.cRectCircle(rect,circle)
- jt.particlesAdd(x,y,w,h,frames,wRate,hRate,alpha,alphaRate,
vX,vY,aX,aY,c,cRate,cMax,r,id) - Almost the same as jt.addPart(x,y,w,h,frames,wRate,hRate,alpha,alphaRate,
vX,vY,aX,aY,c,cRate,cMax,r,rRate,id) - jt.addParticles(x,y,w,h,frames,wRate,hRate,alpha,alphaRate,
vX,vY,aX,aY,c,cRate,cMax,r,id) - Almost the same as jt.addPart(x,y,w,h,frames,wRate,hRate,alpha,alphaRate,
vX,vY,aX,aY,c,cRate,cMax,r,rRate,id) - jt.particleAdd(x,y,w,h,frames,wRate,hRate,alpha,alphaRate,
vX,vY,aX,aY,c,cRate,cMax,r,id) - Almost the same as jt.addPart(x,y,w,h,frames,wRate,hRate,alpha,alphaRate,
vX,vY,aX,aY,c,cRate,cMax,r,rRate,id) - jt.addParticle(x,y,w,h,frames,wRate,hRate,alpha,alphaRate,
vX,vY,aX,aY,c,cRate,cMax,r,id) - Almost the same as jt.addPart(x,y,w,h,frames,wRate,hRate,alpha,alphaRate,
vX,vY,aX,aY,c,cRate,cMax,r,rRate,id) - jt.partAdd(x,y,w,h,frames,wRate,hRate,alpha,alphaRate,
vX,vY,aX,aY,c,cRate,cMax,r,id) - Almost the same as jt.addPart(x,y,w,h,frames,wRate,hRate,alpha,alphaRate,
vX,vY,aX,aY,c,cRate,cMax,r,rRate,id) - jt.particlesDraw()
- Same as jt.drawParts()
- jt.partDraw()
- Same as jt.drawParts()
- jt.drawPart()
- Same as jt.drawParts()
- jt.drawParticles()
- Same as jt.drawParts()
- jt.particlesClear()
- Same as jt.delParts()
- jt.clearParticles()
- Same as jt.delParts()
- jt.delPart()
- Same as jt.delParts()
- jt.clearPart()
- Same as jt.delParts()
- jt.simKey(evt,keyName)
- Divided into jt.simKeyDown(keyName) and jt.simKeyUp(keyName)
- jt.sim(evt,keyName)
- Divided into jt.simKeyDown(keyName) and jt.simKeyUp(keyName)
- jt.keysDown(keys)
- Same as jt.keys(keys)
- jt.mC(x,y,w,h,cam,btn)
- Same as jt.mCheck(x,y,w,h,cam,btn)
- jt.mP(x,y,w,h,cam,btn)
- Same as jt.mPress(x,y,w,h,cam,btn)
- jt.tC(x,y,w,h,cam,fingers)
- Same as jt.tCheck(x,y,w,h,cam,fingers)
- jt.tP(x,y,w,h,cam,fingers)
- Same as jt.tPress(x,y,w,h,cam,fingers)
- jt.mS()
- Same as jt.mScroll()
- jt.r(min,max,val)
- Same as jt.random(min,max,interval)
- jt.kC(keyCode)
- Almost the same as jt.kCheck(keyName,and)
- jt.kP(keyCode)
- Almost the same as jt.kPress(keyName,and)
- jt.m(x,y,w,h,cam)
- Almost the same as jt.mCheck(x,y,w,h,cam,btn)
- jt.i(name,newX,newY,w,h,sX,sY,sW,sH,rotate)
- Almost the same as jt.image(name,x,y,w,h,rotation,sX,sY,sW,sH)
- jt.a(name,newX,newY,w,h,rotate)
- Almost the same as jt.anim(name,x,y,w,h,rotation)
- jt.s(name,src)
- Almost the same as jt.stopPlay(name)
- jte.getObject(name,view)
jt.getObject(name,view)
jt.get(name,view) - Get an object by it's name (and only inside the view if it's specified)
- jte.getObjects(tags,view,and)
jt.getObjects(tags,view,and)
jt.gets(name,view) - Get objects by their tags (and the view if it's specified, if and is true it will check if the objects have all the tags, otherwise it will return if the objects have 1 tag)
- jte.delObject(name,view)
jt.delObject(name,view) - Delete an object by it's name (and only inside the view if it's specified
- jte.delObjects(tags,view,and)
jt.delObjects(tags,view,and) - Delete objects by their tags (and the view if it's specified, if and is true it will check if the objects have all the tags, otherwise it will return if the objects have 1 tag)
- jte.newObject(x,y,w,h,c,r,alpha,attr,cam,view,tags,name)
jt.newObject(x,y,w,h,c,r,alpha,attr,cam,view,tags,name) - Create a new object (you can also put an object instead of each values)
- jte.setView(view)
jt.setView(view) - Change the view, only if it exists
- jte.getView(index)
jt.getView(index) - Get the current view or get a view by it's index (you can also return it's index by entering it's name)
- jte.getViews()
jt.getViews() - Get all the views
- jte.draw(object)
jt.draw(object) - Draw a jte object (every object has this function by default at the end of their update function)
This is the JT library, used to make HTML5 2D games with the canvas much easier/faster!
You can test it out in the editor below (simulates the update function only):
Play a lot of my games made with the JT library and JT Engine at Ynotplay.ca
Want to make your own standalone games or apps? Start here!
Canvas
Resize:
Miscellaneous:
Loop
Alarm:
Shake:
Combo:
Time:
Waves:
Debug:
Assets
Load:
Get:
Sound
General:
Control:
Draw
When drawing shapes, the x and y coordinates are always for the upper left corner. If you pass an object in a shape drawing function except jt.shape(), be sure to include all the necessary parameters, jt.line() needs x1,y1,x2,y2, jt.rect() needs x,y,w,h, jt.circle() needs x,y,d and jt.ellipse() needs x,y,dX,yY
The virtual cameras will affect everything you draw. Use jt.cam() to change their x,y,w,h and their screen positions x,y,w,h. Cameras only works when they are active (with jt.camActive()), by default you will only affect the first camera (the jt.cam(0)), to change it generally use jt.changeCam(num) or directly with jt.cam(num).
Camera:
General:
Shapes:
Text:
Assets:
Clipping:
Filters:
Transform:
Math
General:
Geometry:
Arrays:
Rounding:
Percents:
Collision
Collisions are supported for these shapes: Line(x1,y1,x2,y2), Rect(x,y,w,h), Circle(x,y,d), Ellipse(x,y,dX,dY)
All coordinates start at the upper left corner, to check collision, simply write jt.cShape1Shape2(shape1,shape2)
Example: jt.cRectCircle(rect,circle) | jt.cCircleRect(circle,rect) | jt.cLineLine(line1,line2)
Particles
When creating particles, the x and y coordinates are always for the center/middle
Gamepad
If the parameter controller isn't defined, it will default 0 (the first controller)
The buttons are named after a classic xbox 360 controller: a, b, x, y, leftShoulder, rightShoulder, leftTrigger, rightTrigger, back, start, leftStick, rightStick, dpadUp, dpadDown, dpadLeft, dPadRight, home
General:
Control:
Keyboard
Control:
Miscellaneous:
Mouse
The mouse buttons are 0 for left click, 1 for middle click and 2 for right click
Control:
Miscellaneous:
Touch
For these examples, they will also include the equivalent mouse functions so it is possible to test them on a computer too
Control:
Miscellaneous:
Mouse and Touch
All these functions will do their touch equivalent if on mobile and their mouse equivalent otherwise
For the mouse buttons are 0 for left click, 1 for middle click and 2 for right click
Stats
Stats functions will only work if jt.debug() is true
Keyboard.js (external library)
I made an external library (keyboard.js) that uses JT to create a virtual keyboard, so that it's easier to write in games/apps as you can write with the keyboard, the mouse or by touching on a mobile device.
The keyboard.js library is already linked in the editor, but if you want to use it for your app/game you'll have to link it after the JT library, you can find it here.
Backward compatibility
These are all functions that are only here to work with older JT version, but should not be used otherwise, because of they don't follow nomenclature or are not useful.
-
this.xCam=function(x,num){
return this.drawing.xCam(x,num);
}
this.camX=function(x,num){
return this.drawing.camX(x,num);
}
this.yCam=function(y,num){
return this.drawing.yCam(y,num);
}
this.camY=function(y,num){
return this.drawing.camY(y,num);
}