Search the Community

Showing results for tags 'vue'.

More search options

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


  • HTML5 Game Coding
    • News
    • Game Showcase
    • Facebook Instant Games
    • Web Gaming Standards
    • Coding and Game Design
  • Frameworks
    • Phaser 3
    • Phaser 2
    • Pixi.js
    • Babylon.js
    • Panda 2
    • melonJS
  • General
    • General Talk
  • Business
    • Collaborations (un-paid)
    • Jobs (Hiring and Freelance)
    • Services Offered

Find results in...

Find results that contain...

Date Created

  • Start


Last Updated

  • Start


Filter by number of...


  • Start



Website URL





Found 8 results

  1. vue-ts-starter Project name: Vue project generator First feature: YouTube vs Threejs version 0.0.5 Public access for VuleTube service: Screenshot: YouTube presentation: Production use https node application for web server. git clone npm i Other good solution is node serve for instant start. Install: npm install -g serve Run: serve -s dist // or npm run serve Project details Vue3 Version: typescript 3.9.6 Visual Code Text Editor used. NodeJS baclend part Features Flow Note: 0.0.x => any changes 0.x.1 ... n => any changes + updated present logic or new big feature. x.1.1 ... n => release git/build point version. - version 0.0.2 [MASTER] Getting response for youtube search. Call server part for saving videos - version 0.0.3 [MASTER] Add options switch-place for two main components Implement LocalStorageMemory class (For saving all user infly data - view options etc.) - version 0.0.4 [MASTER] Save current (exist) options with localStorage and load on refresh. Every next options will be implemented with localStorage support. - version 0.0.5 [MASTER] Added new server module : npm install --save image-downloader Prepare for search result preview in 3d. with raycast options for navigate. Add options for: save result number per page - pagination. show result in 3d version 0.1.1 [MASTER] Adding progress for video duration. Adding webcam options. Replace text with icons. version 0.1.2 [NEXT-WIP] Adding paypal donate buttons version 0.1.3 [NEXT] Prevent raycast click event behind 3d plane video FIX@ Project structure ├── dist/ (This is auto generated) ├── node_modules/ (This is auto generated) ├── public/ | ├── assets/ | | └── logo.png | ├── thumbnails/ | ├── videos/ | | └── list.html | ├── bad.html | ├── favicon.ico | ├── index.html ├── server/ | ├── node_modules/ (This is auto generated) | ├── package.json | ├── package-lock.json | ├── server-connector.js ├── src/ | ├── components/ | | ├── youtube-3d/ | | | ├── myYouTube.vue | | | └── webgl-player.vue | | ├── myFooter.vue | | ├── myHeader.vue | ├── App.vue | └── styles/ | | └── styles.scss | ├── App.vue | ├── main.ts | ├── error-instance.ts | ├── shims-tsx.d.ts | ├── shims-vue.d.ts | └── store.ts ├── .gitignore ├── (This file) ├── tsconfig.json ├── package.json ├── package-lock.json (This is auto generated) └── babel.config.js Components : - myYouTube.vue Getting response for youtube search. Call server part for saving videos - webgl-player.vue Open opengles port view, look for video source saved to the maximumroulette:3000 I use quick solution from npm: Response for youtube api v3 call search. body: "{↵ "kind": "youtube#searchListResponse",↵ "etag"" headers: {cache-control: "private", content-encoding: "gzip", content-length: "5512", content-type: "application/json; charset=UTF-8", date: "Sun, 05 Jul 2020 20:47:06 GMT", …} result: { kind: "youtube#searchListResponse", etag: "3nOm8AR0NU4TDlCxh0UCxk1KB38", nextPageToken: "CBkQAA", regionCode: "RS", pageInfo: {…}, …} status: 200 statusText: null Result property: { "kind": "youtube#searchResult", "etag": "mlweRndBtBgAcVC-11ZrL0oI7ok", "id": { "kind": "youtube#video", "videoId": "YPhJOC9-M_M" }, "snippet": { "publishedAt": "2019-07-14T19:27:31Z", "channelId": "UCc1NtMtvoVzKnOtnai9LGsA", "title": "Create game engine - Visual typescript game engine", "description": "Clone or download from : Next video\ developing in live - adding multiplayer feature. Project : Visual ts ...", "thumbnails": { "default": { "url": "", "width": 120, "height": 90 }, "medium": { "url": "", "width": 320, "height": 180 }, "high": { "url": "", "width": 480, "height": 360 } }, "channelTitle": "javascript fanatic", "liveBroadcastContent": "none", "publishTime": "2019-07-14T19:27:31Z" } } { etag: "3nOm8AR0NU4TDlCxh0UCxk1KB38" items: etag: "mlweRndBtBgAcVC-11ZrL0oI7ok" id: {kind: "youtube#video", videoId: "YPhJOC9-M_M"} kind: "youtube#searchResult" snippet: {publis kind: "youtube#searchListResponse" nextPageToken: "CBkQAA" pageInfo: {totalResults: 400229, resultsPerPage: 25} regionCode: "RS" } } VueMaterial help Notes : All other <input type="file"> attributes, such as multiple and accept, can be used on md-field. Icons used with eslint or any other cheker full strict only for proc build in dev status lint will pass more roles. About routes From official: Simple Routing From Scratch If you only need very simple routing and do not wish to involve a full-featured router library, you can do so by dynamically rendering a page-level component like this: const NotFound = { template: '<p>Page not found</p>' } const Home = { template: '<p>home page</p>' } const About = { template: '<p>about page</p>' } const routes = { '/': Home, '/about': About } new Vue({ el: '#app', data: { currentRoute: window.location.pathname }, computed: { ViewComponent () { return routes[this.currentRoute] || NotFound } }, render (h) { return h(this.ViewComponent) } }) Spiral position Not in use at the moment. var count = 10; var radius = 32; for ( var i = 1, l = count; i <= l; i ++ ) { var phi = Math.acos( - 1 + ( 2 * i ) / l ); var theta = Math.sqrt( l * Math.PI ) * phi; var mesh = new THREE.Mesh( geometry, material ); mesh.position.setFromSphericalCoords( radius, phi, theta ); mesh.lookAt( ); this.scene.add( mesh ); } YT Download module Download from: Help links/public Direct link for dev server VueTube web DEV [WIP] service 2020
  2. Hi everyone! I am going to load sound file in vue-pixi. I have no way to do this! Please help me. Thanks
  3. Jenson

    Pixi - Vue

    Hi everyone, I wanna use vue-pixi package on my vuejs project, But this package doesnt work properly. Which version of vuejs do I have to use for this package? The package is installed but the Import command doesnt work. vue-pixi is not recognized. Thanks😉
  4. Hi, I have problem with phaser performance. The phaser CPU usage is too high. Configuration : - game is on phaser 3 with vue - main page is on vue with game in iFrame this.gameInstance = new Phaser.Game({ width: properties.width, height: properties.height, resolution: PIXEL_RATIO, "callbacks.postBoot": function() { document.getElementsByTagName("canvas")[0].style.width = properties.width + "px" document.getElementsByTagName("canvas")[0].style.height = properties.height + "px" }, scaleMode: 0, type: Phaser.CANVAS, parent: document.getElementById('game'), title: '☕️ Brunch with Phaser and ES6', // 'My Phaser 3 Game' url: '', version: '0.0.1', banner: { background: ['#e54661', '#ffa644', '#998a2f', '#2c594f', '#002d40'] }, fps: { min: 10, target: 60, forceSetTimeout: true, }, loader: { path: 'static/phaser/', }, physics: { default: 'arcade', arcade: { debug: false, gravity: { y: 300 }, }, }, scene: [ LoaderScene, BootScene, DefaultScene, GameOverScene, ], }); CPU usage: - Phaser = 40% - Phaser with vue = 80-90% - main page without iframe = 5-10 % - main page with iframe = 100% js heap size: - Phaser = 50 - 70 MB - Phaser with vue ~ 70 - 100MB - main page without iFrame ~ 50 - 80 MB - main page with iFrame ~ 100 - 150 MB The game is equipped with 20-30 icons, 10 atlases, 19 mp3 sounds and 5 background image, with total size of assets about 3MB. Thank you in advance
  5. If you haven't yet seen A-Frame yet, you should check it out. The gist is that you use HTML tags to define your scene. I was working on porting A-Frame to Vue because the devtools are amazing and the components are expressive and makes your app really reactive. I prefer Vue over React since it's simpler and I don't have to work in JSX. While working on integration with A-Frame I started to notice that the overlap between A-Frame's entities and Vue's components became rather cumbersome and Three.js's API and documentation made the situation worse. I noticed the Babylon.js project shortly after and discovered how awesome it is. I then decided it would be better to make my own ECS using Babylon.js with Vue components. As of right now I have Scene, Entity, Mesh, Light, and Animation components created. Here's a sneak peek: And the code for the scene written in Pug: I'll keep this thread updated as I continue progressing on the project. Let me know if you have any ideas or feedback. You can watch me code it on my Twitch stream this Monday from 2-10pm CST. I just started this project a couple days ago, so it doesn't have documentation yet, but you can see the code on Github or grab it off of NPM as vue-babylonjs
  6. I created a Webpack template that sets up a Vue project with Phaser 3 integration. It's really minimal but can get people started. Feel free to hit me with suggestions. Cheers
  7. Hi, I've recently started making my new (first) game. I decided to go with ThreeJS and A-frame as framework/engine but these aren't very well prepared for game development (lack features I need) so I've switched to BabylonJS. But with my UI being created in Vue (worked well with A-frame HTML elements) there isn't any advice in Google. I've tried integrating it with my Vue component but in a console it says : I thought it is because of Canvas isn't the correct element by when I tried to log it, it prints it is. I don't know if this integration is even possible. As I said I'm new to BabylonJS and maybe I lack some knowledge.
  8. Hi all, i am trying to use Pixijs inside a vue instance and have encountered a strange issue. I know it might no be directly related to Pixi.js and you can jump to the tl;dr section for a question about how to update sprites locations, thanks, ------------------------------ All worked as expected when i used the particle container example from Pixi's official website.,js,console,output But now I want to have more control over the location of those sprites, like using an array to re-assign x, y, of each sprite. so I add a reference of pixi instance as vue's data element at line 12 and received an error It would throw a similar error if I want to pass a reference of ``maggots`` by using this.pixiInstance = maggots. jsbin seems to have added some protection or sandboxed this but it would caused a stackoverflow if you run this directly inside Chrome. So I am really desperate here on how to access ``maggots`` so I can loop thru and update all its elements... My last resort would be removing the canvas dom element and redraw it everytime i have to update the sprites data. i really don't want to do that Edit1: I am using the import below to import pixi, not sure if this would make any difference. =================TL;DR and Pure Pixijs question========================= Once you have initialized a Pixjs instance and have added sprites to it, what's the best way to access the instance so you can loop and update sprites' x, y values?