piqnt / stage.js Goto Github PK

Stage.js version : 0.9.4
Vue.js version 3.3.4
Development environment : Vite
Package manager : PNPM 8.6.9

I created a small project with the Vue.js framework to test the Stage.js library.

When I try to import the library I get an error:

Uncaught ReferenceError: DEBUG is not defined
    at node_modules/.pnpm/[email protected]/node_modules/stage-js/lib/core.js (core.js:2:3)
    at __require (chunk-76J2PTFD.js?v=a126181c:3:50)
    at node_modules/.pnpm/[email protected]/node_modules/stage-js/lib/index.js (index.js:1:18)
    at __require (chunk-76J2PTFD.js?v=a126181c:3:50)
    at node_modules/.pnpm/[email protected]/node_modules/stage-js/platform/web.js (web.js:1:18)
    at __require (chunk-76J2PTFD.js?v=a126181c:3:50)
    at web.js:16:1

This error appears in this import:

import {Stage} from "stage-js/platform/web.js"

I also tried this import:

import {Stage} from "stage-js"

Here is my code :

<script setup>
  // -- Dependencies --
  import {ref, onMounted} from "vue";
  import {Stage} from "stage-js/platform/web.js" // <-- Here

  // -- References --
  const gameContainer = ref(null);

  // -- Variables --
  let stage;

  // -- Life cycles --
  onMounted(() => {
    stage = new Stage(gameContainer.value);
  })
</script>

<template>
  <div ref="gameContainer"></div>
</template>

<style scoped>
  div{
    width: 1000px;
    height: 1000px;
  }
</style>

Has anyone ever encountered this error?
How can I solve this problem?

Hello!
Can you help me, please.
I can't fill path shape ship for exemple color #e1181e, without others world.
I tried:
shipBody.shapes[0].proto = ui.p2;
shipBody.shapes[0].proto.options.lineColor = '#e1181e';
But it paints all world to #e1181e.
I need color ship to #e1181e and asteroids #808080.
How i can do it?
What am I doing wrong?
Thank you.
Best regards

I saw scaleMode but I didn't see how can I scale an image with nearest neighbor (to prevent pixelated image from blurry)?

when i use gulp-babel to compile my project, thers is an error message blew, could u please fixd this issue?

message: /Users/showzyl/Desktop/workspace/hybird/dsp/src/js/stage.js: await is a reserved word (991:5)

bonnie@bonnie ~/WorkStation/stage.js/example/game-orbit $ node -v
v4.2.2
bonnie@bonnie ~/WorkStation/stage.js/example/game-orbit $ npm -v
2.14.7
bonnie@bonnie ~/WorkStation/stage.js/example/game-orbit $ cordova -v
5.4.0
bonnie@bonnie ~/WorkStation/stage.js/example/game-orbit $ cordova build
Running command: /home/bonnie/WorkStation/stage.js/example/game-orbit/platforms/android/cordova/build
ANDROID_HOME=/home/bonnie/Android/Sdk
JAVA_HOME=/usr/lib/jvm/java-7-openjdk-amd64
Running: /home/bonnie/WorkStation/stage.js/example/game-orbit/platforms/android/gradlew cdvBuildDebug -b /home/bonnie/WorkStation/stage.js/example/game-orbit/platforms/android/build.gradle -Dorg.gradle.daemon=true
:preBuild
:compileDebugNdk UP-TO-DATE
:preDebugBuild
:checkDebugManifest
:CordovaLib:compileLint
:CordovaLib:copyDebugLint UP-TO-DATE
:CordovaLib:mergeDebugProguardFiles UP-TO-DATE
:CordovaLib:preBuild
:CordovaLib:preDebugBuild
:CordovaLib:checkDebugManifest
:CordovaLib:prepareDebugDependencies
:CordovaLib:compileDebugAidl UP-TO-DATE
:CordovaLib:compileDebugRenderscript UP-TO-DATE
:CordovaLib:generateDebugBuildConfig UP-TO-DATE
:CordovaLib:generateDebugAssets UP-TO-DATE
:CordovaLib:mergeDebugAssets UP-TO-DATE
:CordovaLib:generateDebugResValues UP-TO-DATE
:CordovaLib:generateDebugResources UP-TO-DATE
:CordovaLib:packageDebugResources UP-TO-DATE
:CordovaLib:processDebugManifest UP-TO-DATE
:CordovaLib:processDebugResources UP-TO-DATE
:CordovaLib:generateDebugSources UP-TO-DATE
:CordovaLib:compileDebugJava UP-TO-DATE
:CordovaLib:processDebugJavaRes UP-TO-DATE
:CordovaLib:packageDebugJar UP-TO-DATE
:CordovaLib:compileDebugNdk UP-TO-DATE
:CordovaLib:packageDebugJniLibs UP-TO-DATE
:CordovaLib:packageDebugLocalJar UP-TO-DATE
:CordovaLib:packageDebugRenderscript UP-TO-DATE
:CordovaLib:bundleDebug UP-TO-DATE
:prepareAndroidCordovaLibUnspecifiedDebugLibrary UP-TO-DATE
:prepareDebugDependencies
:compileDebugAidl UP-TO-DATE
:compileDebugRenderscript UP-TO-DATE
:generateDebugBuildConfig UP-TO-DATE
:generateDebugAssets UP-TO-DATE
:mergeDebugAssets UP-TO-DATE
:generateDebugResValues UP-TO-DATE
:generateDebugResources UP-TO-DATE
:mergeDebugResources UP-TO-DATE
:processDebugManifest UP-TO-DATE
:processDebugResources UP-TO-DATE
:generateDebugSources UP-TO-DATE
:compileDebugJava
/home/bonnie/WorkStation/stage.js/example/game-orbit/platforms/android/src/com/piqnt/fastcontext/FastContextPlugin.java:7: error: cannot find symbol
import org.apache.cordova.CordovaWebViewClient;
^
symbol: class CordovaWebViewClient
location: package org.apache.cordova
/home/bonnie/WorkStation/stage.js/example/game-orbit/platforms/android/src/com/piqnt/fastcontext/FastContextPlugin.java:42: error: cannot find symbol
webView.addView(fastView);
^
symbol: method addView(FastContextView)
location: variable webView of type CordovaWebView
/home/bonnie/WorkStation/stage.js/example/game-orbit/platforms/android/src/com/piqnt/fastcontext/FastContextPlugin.java:51: error: cannot find symbol
ViewGroup webParent = (ViewGroup) webView.getParent();
^
symbol: method getParent()
location: variable webView of type CordovaWebView
/home/bonnie/WorkStation/stage.js/example/game-orbit/platforms/android/src/com/piqnt/fastcontext/FastContextPlugin.java:58: error: no suitable method found for removeView(CordovaWebView)
webParent.removeView(webView);
^
method ViewGroup.removeView(View) is not applicable
(actual argument CordovaWebView cannot be converted to View by method invocation conversion)
method ViewManager.removeView(View) is not applicable
(actual argument CordovaWebView cannot be converted to View by method invocation conversion)
/home/bonnie/WorkStation/stage.js/example/game-orbit/platforms/android/src/com/piqnt/fastcontext/FastContextPlugin.java:62: error: no suitable method found for addView(CordovaWebView)
newLayout.addView(webView);
^
method ViewGroup.addView(View,int,LayoutParams) is not applicable
(actual and formal argument lists differ in length)
method ViewGroup.addView(View,LayoutParams) is not applicable
(actual and formal argument lists differ in length)
method ViewGroup.addView(View,int,int) is not applicable
(actual and formal argument lists differ in length)
method ViewGroup.addView(View,int) is not applicable
(actual and formal argument lists differ in length)
method ViewGroup.addView(View) is not applicable
(actual argument CordovaWebView cannot be converted to View by method invocation conversion)
/home/bonnie/WorkStation/stage.js/example/game-orbit/platforms/android/src/com/piqnt/fastcontext/FastContextPlugin.java:64: error: cannot find symbol
webView.setBackgroundColor(Color.TRANSPARENT);
^
symbol: method setBackgroundColor(int)
location: variable webView of type CordovaWebView
/home/bonnie/WorkStation/stage.js/example/game-orbit/platforms/android/src/com/piqnt/fastcontext/FastContextPlugin.java:65: error: cannot find symbol
webView.setLayerType(WebView.LAYER_TYPE_SOFTWARE, null);
^
symbol: method setLayerType(int,)
location: variable webView of type CordovaWebView
/home/bonnie/WorkStation/stage.js/example/game-orbit/platforms/android/src/com/piqnt/fastcontext/FastContextPlugin.java:66: error: cannot find symbol
webView.setWebViewClient(new CordovaWebViewClient(cordova,
^
symbol: class CordovaWebViewClient
8 errors
:compileDebugJava FAILED

FAILURE: Build failed with an exception.

• What went wrong:
  Execution failed for task ':compileDebugJava'.

  Compilation failed; see the compiler error output for details.

• Try:
  Run with --stacktrace option to get the stack trace. Run with --info or --debug option to get more log output.

BUILD FAILED

Total time: 3.498 secs

/home/bonnie/WorkStation/stage.js/example/game-orbit/platforms/android/cordova/node_modules/q/q.js:126
throw e;
^
Error code 1 for command: /home/bonnie/WorkStation/stage.js/example/game-orbit/platforms/android/gradlew with args: cdvBuildDebug,-b,/home/bonnie/WorkStation/stage.js/example/game-orbit/platforms/android/build.gradle,-Dorg.gradle.daemon=true
ERROR building one of the platforms: Error: /home/bonnie/WorkStation/stage.js/example/game-orbit/platforms/android/cordova/build: Command failed with exit code 1
You may not have the required environment or OS to build this project
Error: /home/bonnie/WorkStation/stage.js/example/game-orbit/platforms/android/cordova/build: Command failed with exit code 1

Rotation does not working as expected
https://streamable.com/uu6509

HI,
How can I delete a stage completely?
I want to switch between multiple games so I need to be able to delete the previous game from memory and run the new game.

: in cutout name without texture name conflicts with texture:cutout format.

I'm using scaleWidth instead of scale to make sure the texture is within 80% of the screen width and it works fine with the following setting.

node.pin({
  alignX: -0.5,
  alignY: -0.5,
  scaleMode: 'in',
  scaleWidth: window.innerWidth * 0.8,
  scaleHeight: window.innerHeight * 0.2,
});

But it seems that scaleWidth is not recognized by tween and it just gets ignored. So what should I do if I want to set scaleWidth in tween?

Use iOS screen.availWidth/Height.

I was wondering what application the texture atlas .js was being created in?

Thanks.

Because the changes between the old version and the new one are too disperse and too many, and I can't delete the old one. Well please change the Chinese Doc link in your English one to the new Chinese Doc. And I found a omission that at the end of Global Methods , the second section

// Create and preload a texture atlas
Stage({ });

the parameter has nothing as its key or value. Is it right?

Glad to interrupt you. Hahahahah Villor

I'm using Stage.js to implement a magnifying glass effect like this.

The circle in the top shows the magnified area around mouse position. I tried to read the pixels rendered by Stage.js using getImageData but got all 0 in data. My code is available here.

I'm not sure if transformation of canvas in your game engine changed anything for getImageData, but I don't think this should be an issue since canvas spec states:

The current path, transformation matrix, shadow attributes, global alpha, the clipping region, and global composition operator must not affect the getImageData() and putImageData() methods.

Any idea how should I get the pixels around mouse position in this way? Or, what else game engine should I use to implement this magnifying glass effect?

Thanks!

Hi, I am trying to add a background image to a testbed example. I have used the below code:

...
// stage.empty();
    stage.background(testbed.background);
    stage.viewbox(testbed.width, testbed.height, 'in-pad');
    stage.pin('alignX', -0.5);
    stage.pin('alignY', -0.5);
		stage.prepend(viewer);


		
Stage({
	image : { src : '/media/assets/pinball.png', ratio : 1 },
  textures : {
    'board' : { x : 0, y : 0,  width : 320, height : 416 }
  }
});
...

But no image is rendered on the canvas?

I couldn't find anywhere how to mount the app in a custom node. I would like to integrate stagejs with vuejs to make a domino game.

I'll use the webpack,but I cannot find module ".".
Can you help me?

Let's say change animation from moveRight to MoveLeft on click?

var node = Stage.anim(textures);

onclick {
    node.frames(anothertextures);
    or
    node.play(anothertextures);
}

Thank you for this amazing library!

Thanks for the great project, @shakiba. Currently Tween._done supports one function. Should we make it a list, such that the following application will also work?
img.tween(100).alpha(0).remove().done(fn)

Otherwise, it will fail to remove since

1. remove() set _done to this.remove(),
2. but done(fn) will overwrite the _done. to fn.

or I should to use the Browserify?